Component rendering twice

Hello,

I have an issue that is consistent throughout my entire application.

In all my forms, the component rendering the form that has useActionState renders twice, because I simply have a console log in the function's body, and it pops up twice.

It wasn't necessarily an issue until I started putting in toast success messages.

https://gist.github.com/0xMatt/48042ead019bba5c5c49d2b964d39bfc#file-contact-tsx-L22-L25

I have highlighted the lines that are logged twice. Upon load of the page, the console log shows up twice. When I submit the form, the toast appears twice.

Any ideas on how I can go about troubleshooting this?

I've went and started from the root layout and all sub layouts wrapping around {children}.

Every component that has 'use client' renders twice based off a console.log.

If it helps any better, I do have the full source code public on github. https://github.com/0xMatt/javelet.dev

Nermind, this was caused by react strict mode.

It would be nice to know how to avoid getting two toast messages with it in this mode, but for the time being I'm just disabling it.

StrictMode emulates edge cases in React where an effect can re-run a second time with the same state/props, which can happen in React 19 for example using the Activity API (formerly react offscreen API)

The right fix is to make sure that even if the effect runs twice, it doesn't create two toasts, and with sonner the way you do that is to assign an ID to it

Here's a relevant GitHub issue with a fix

https://github.com/emilkowalski/sonner/issues/322#issuecomment-2584931182