fix: don't double-invoke effects for moved children in StrictMode#35916
Open
emmaeng700 wants to merge 2 commits intofacebook:mainfrom
Open
fix: don't double-invoke effects for moved children in StrictMode#35916emmaeng700 wants to merge 2 commits intofacebook:mainfrom
emmaeng700 wants to merge 2 commits intofacebook:mainfrom
Conversation
6b9aeac to
9a86561
Compare
|
Comparing: 98ce535...9a86561 Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: (No significant changes) |
When a hook's dependency array changes size and contains Symbol values, the error message generation crashes with "Cannot convert a Symbol value to a string" because Array.join() implicitly calls toString() on each element. Use String() explicitly to safely convert any dep value. Fixes facebook#19848
In StrictMode, `doubleInvokeEffectsInDEVIfNecessary` fires for any fiber that has the `PlacementDEV` flag set. Previously, `placeChild` set `PlacementDEV` on both newly inserted fibers AND fibers that were moved to a different position in an array. This caused a regression in React 19: when a keyed child is reordered within an array, its effects are re-run in dev/StrictMode even when dependencies are empty `[]`. The same component in production, or in React 18, correctly skips effect re-runs for moves. The fix is to only set `PlacementDEV` for actual insertions (where `current === null`). Moved fibers (`current !== null`, `oldIndex < lastPlacedIndex`) still receive the `Placement` flag so the host node is correctly repositioned in the DOM, but StrictMode no longer treats them as new mounts. Also fix unused `ref3` variable in ReactFabric-test.internal.js introduced in facebook#35912 (copy-paste: third View used ref2 instead of ref3). Fixes facebook#32561
9a86561 to
a2b2040
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #32561 — in React 19,
StrictModewas incorrectly re-running effects (even with[]dependencies) when a keyed child is reordered within an array. This does not happen in React 18 or in production builds.Root Cause
placeChild()inReactChildFiber.jssetsPlacementDEVon both newly inserted fibers and moved fibers (those with an existingalternatewhoseoldIndex < lastPlacedIndex). The StrictMode double-invoke logic indoubleInvokeEffectsInDEVIfNecessarytreats any fiber withPlacementDEVas a new mount and re-runs its effects.A moved fiber is not a new mount — it already has state, refs, and a lifecycle. Re-running its effects in dev mode is incorrect and diverges from production behavior.
Fix
Only set
PlacementDEVfor actual insertions (current === null). Moved fibers still receive thePlacementflag so the host node is repositioned in the DOM, butPlacementDEVis omitted so StrictMode does not treat them as new mounts.Test
Added a test in
StrictEffectsMode-test.jsthat renders[A, B, C]in StrictMode, reorders to[C, A, B], and asserts that no effect callbacks fire (no mount/unmount ofuseEffectoruseLayoutEffectwith[]deps).Checklist
placeChild()PlacementDEVpath is dev-only)