Temporarily Mount useInsertionEffect while a Gesture snapshot is being computed #35565
+112
−25
Conversation
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
This only applies to newly inserted Fibers and not clones (e.g. if they were cloned from a previous offscreen tree which would've inserted them already).
This restores things before starting the actual animation whose target snapshot should represent the current state that's mounted.
sebmarkbage
changed the title
github-actions
bot
added
the
React Core Team
This is just like an update.
sebmarkbage
force-pushed
the
gestureinsertioneffect
branch
from
77cc9eb to
ffaae72
Compare
acdlite
approved these changes
Jan 20, 2026
github-actions bot
pushed a commit
that referenced
this pull request
Jan 20, 2026
…g computed (#35565) `useInsertionEffect` is meant to be used to insert `<style>` tags that affect the layout. It allows precomputing a layout before it mounts. Since we're not normally firing any effects during the "apply gesture" phase where we create the clones, it's possible for the target snapshot to be missing styles. This makes it so that `useInsertionEffect` for a new tree are mounted before the snapshot is taken and then unmounted before the animation starts. Note that because we are mounting a clone of the DOM tree and the previous DOM tree remains mounted during the snapshot, we can't unmount any previous insertion effects. This can lead to conflicts but that is similar to what can happen with conflicts for two mounted Activity boundaries since insertion effects can remain mounted inside those. A revealed Activity will have already had their insertion effects fired while offscreen. However, one thing this doesn't yet do is handle the case where a `useInsertionEffect` is *updated* as part of a gesture being applied. This means it's still possible for it to miss some styles in that case. The interesting thing there is that since the old state and the new state will both be applicable to the global DOM in this phase, what should really happen is that we should mount the new updated state without unmounting the old state and then unmount the updated state. Meaning you can have the same hook in the mounted state twice at the same time. DiffTrain build for [1ecd99c](1ecd99c)
sebmarkbage
pushed a commit
to vercel/next.js
that referenced
this pull request
Jan 20, 2026
[diff facebook/react@41b3e9a6...d2908752](facebook/react@41b3e9a...d290875) <details> <summary>React upstream changes</summary> - facebook/react#35567 - facebook/react#35566 - facebook/react#35565 - facebook/react#35564 - facebook/react#35559 - facebook/react#35556 </details>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
useInsertionEffectis meant to be used to insert<style>tags that affect the layout. It allows precomputing a layout before it mounts.Since we're not normally firing any effects during the "apply gesture" phase where we create the clones, it's possible for the target snapshot to be missing styles. This makes it so that
useInsertionEffectfor a new tree are mounted before the snapshot is taken and then unmounted before the animation starts.Note that because we are mounting a clone of the DOM tree and the previous DOM tree remains mounted during the snapshot, we can't unmount any previous insertion effects. This can lead to conflicts but that is similar to what can happen with conflicts for two mounted Activity boundaries since insertion effects can remain mounted inside those.
A revealed Activity will have already had their insertion effects fired while offscreen.
However, one thing this doesn't yet do is handle the case where a
useInsertionEffectis updated as part of a gesture being applied. This means it's still possible for it to miss some styles in that case. The interesting thing there is that since the old state and the new state will both be applicable to the global DOM in this phase, what should really happen is that we should mount the new updated state without unmounting the old state and then unmount the updated state. Meaning you can have the same hook in the mounted state twice at the same time.