StrictMode Render

When strict effects are enabled, React intentionally double-invokes effects (mount -> unmount -> mount) for newly mounted components.

StrictMode renders components twice (on dev but not production) in order to detect any problems with your code and warn you about them (which can be quite useful).

With the release of React 18+, StrictMode gets an additional behavior that we call strict effects mode.

* React mounts the component.
  * Layout effects are created.
  * Effects are created.
* React simulates unmounting the component.
  * Layout effects are destroyed.
  * Effects are destroyed.
* React simulates mounting the component with the previous state.
  * Layout effects are created.
  * Effects are created.

This is done to guarantee idempotency.

• e.g. calling effects like useEffect twice helps detect unintended side effect changes.

Like other strict mode behaviors, React will only do this for development builds.

How to resolve it

You should NOT turn off the strict mode to get rid of this behavior in dev.

You need to make your rendering logic and state logic idempotent (identical, without side effects on any number of renders).

Case in point: Why react-beautiful-dnd breaks

This is caused by concurrent rendering and how react-beautiful-dnd registers their droppables inside the hook.

The library is doing it inside a useLayoutEffect with a dependency array, so it will fire on the first componentDidMount, but not after when the component gets remounted in strict mode.