Bug: StrictMode reruns effects when a child is moved in an array

[krispya]

With strict mode on in React 19, when a keyed React element is moved in an array its effects are rerun, even if they have no dependencies. The same behavior is not done for elements that stay in place. This is different from React 18 where moving an element did not trigger rerunning effects.

I would like confirmation if this is intended or a bug, but I did not see it documented so I assume it is a bug.

React version: 19.0.10

Steps To Reproduce

Here is a repro in React 19: https://stackblitz.com/edit/react-ts-qmpiwmru?file=App.tsx,index.tsx
And the same in React 18: https://stackblitz.com/edit/react-ts-pzgjq9ay?file=App.tsx

The current behavior

All effects are rerun when a keyed React element is moved in a child array.

The expected behavior

No effects are run, like React 18.

[annous246]

I did run some tests ,

• when you use only list reduction (reducedIds) in REACT 19 it dosent rerender ,
• but when it comes to using only rotated ids with no reduction it rerenders ,
  • ->in my opinion new REACT 19 updates are much more strict on the virtual DOM comparaison on each change made to the order of keys per child element .
• 
  (this is evident when the last click that leaves you with the last child element dosent trigger a rerender due to elements order no changing after it),
  to prevent that "unecessary" rerender -> use mapping indexes as key values per element for order stability

function MapComponent({ ids }: { ids: number[] }) {
  return (
    <>
      {ids.map((id,index) => (
        <Item key={index} id={id} />
      ))}
    </>
  );
}

I hope This Helps ❤️

[krispya]

I did run some tests ,

* when you use only list reduction (reducedIds) in REACT 19 it dosent rerender ,

* but when it comes to using only rotated ids with no reduction it rerenders ,
  
  * ->in my opinion new REACT 19 updates are much more strict on the virtual DOM comparaison on each change made to the order of keys per child element  .

* **(this is evident when the last click that leaves you with the last child element dosent trigger a rerender due to elements order no changing after it)**, to prevent  that "unecessary" rerender -> use mapping indexes as key values per element for order stability

function MapComponent({ ids }: { ids: number[] }) {
  return (
    <>
      {ids.map((id,index) => (
        <Item key={index} id={id} />
      ))}
    </>
  );
}

I hope This Helps ❤️

I think this proves it is a bug as the fix you suggest is explicitly called out in the React docs as a pitfall because it creates unstable element-key references: https://react.dev/learn/rendering-lists#why-does-react-need-keys

If you dig into react-reconciler it has four kinds of actions it can take on keyed elements: insert, move, stay or delete. Stay does not cause effects to run mount, as you point out, but move does. Insert is a mount and delete is an unmount. I don't believe move should cause effects to mount, like it did in React 18, and this looks like a regression.

[totomakers]

Encounter the same issue. We have a Drag and drop list;

With React18 - the effect are not rerun - key is set to a static ID comming from API.
With React19 - effect are rerun

React 18 behavior:

output.webm

React 19 behavior:

output2.webm

[kassens]

The "double invoke effects" behavior is really just a simple test for components that their effects should be able to unmount and remount at any time.

Not sure if this is easily avoidable, but overall, ideally components should not care about this extra call in dev/strict mode.

[krispya]

In my case the effect had no dependencies and was setting an initial value. I made the (false) assumption this effect would only run on mount, even if it ran twice, and so when it started rerunning other than on mount it was resetting the value. To fix this, as you suggest, I had to write defensive code where a ref kept track of if the effect had already run. It was a reminder that effects can really run at any time and there is no guarantee an effect with empty dependencies will run when you expect.