[Fresh] Capture Hook signatures lazily on first render #15832
Merged
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 adds a render-time signature call by making __signature__ curried. We need both calls. The init time tells us which type has which signature. The render time call says when's a good time to capture the lazy Hooks tree. This is necessary for supporting inline requires. I will do that in next commit.
Details of bundled changes.Comparing: d0e041a...ee0704d react-fresh
Generated by 🚫 dangerJS |
gaearon
force-pushed
the
fresh-sig-rethink
branch
from
68004e7 to
ac9b827
Compare
This ensures inline requires don't break comparisons between Hook signatures of previous and next versions by caching Hook list at the time of first render.
gaearon
force-pushed
the
fresh-sig-rethink
branch
from
cd6a8fc to
c9132b4
Compare
Instead of a traversal during the comparison, explicitly compute full keys. This makes it easier to debug mismatches.
gaearon
force-pushed
the
fresh-sig-rethink
branch
from
c9132b4 to
ee0704d
Compare
gaearon
added a commit
to gaearon/react
that referenced
this pull request
Jun 19, 2019
* Split the signature call into two calls This adds a render-time signature call by making __signature__ curried. We need both calls. The init time tells us which type has which signature. The render time call says when's a good time to capture the lazy Hooks tree. This is necessary for supporting inline requires. I will do that in next commit. * Lazily compute Hook list on first render This ensures inline requires don't break comparisons between Hook signatures of previous and next versions by caching Hook list at the time of first render. * Refactor computing Hook signature keys Instead of a traversal during the comparison, explicitly compute full keys. This makes it easier to debug mismatches.
rickhanlonii
pushed a commit
to rickhanlonii/react
that referenced
this pull request
Jun 25, 2019
* Split the signature call into two calls This adds a render-time signature call by making __signature__ curried. We need both calls. The init time tells us which type has which signature. The render time call says when's a good time to capture the lazy Hooks tree. This is necessary for supporting inline requires. I will do that in next commit. * Lazily compute Hook list on first render This ensures inline requires don't break comparisons between Hook signatures of previous and next versions by caching Hook list at the time of first render. * Refactor computing Hook signature keys Instead of a traversal during the comparison, explicitly compute full keys. This makes it easier to debug mismatches.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 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.
We compare "signatures" of components on a hot update to decide whether to preserve or throw away the state. Signatures are created from the order of Hook calls at build time. They include references to nested Hooks themselves, since a reorder inside a custom Hook should remount components containing it. But when do we read those references?
Previously, nested Hook call signatures were computed during the hot update, just before comparison with the next version. However, it's too late on React Native because of inline requires.
[useFoo]becomes[require('useFoo')]so during hot update, we compare the next version with itself.The fix is to make the signing resilient to timing. We now capture the list of Hooks during the first render of a component of a given type, instead of during the next hot update. To do this, I'm introducing another function call layer. The wrapper function is still used for wrapping — but also repurposed for marking the first render (and forcing signature calculation at that time). On next renders it becomes a noop. You can see the new compiled output in snapshots.
I verified this solves the problem on RN. Editing Hooks in another file now correctly resets state, but only if you change the inner Hook call order.