feat(react): compatibility with the React compiler #851
Conversation
This file contains 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
gdorsi
commented
Oct 10, 2024
| @@ -50,7 +50,7 @@ function useVirtualizerBase< | |||
| return instance._willUpdate() | |||
| }) | |||
|
|
|||
| return instance | |||
| return React.useMemo(() => Object.create(instance), [instance.getVirtualItems()]) | |||
There was a problem hiding this comment.
We could move this function inside the virtual core and use the memo helper to invalidate the instance generation.
Should give us more flexibility and will be easier to cover more invalidations.
|
looking forward for this to get merged, especially since with react 19 rc1 things seem to start moving again |
|
Thinking about this, if we want to move in this direction, useSyncExternalStore feels like a more natural fit compared to useMemo. We can make it as separate hook" For now 'use no memo' seems like a reasonable temporary workaround! https://react.dev/learn/react-compiler#something-is-not-working-after-compilation |
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.
Fixes #736
Fixes #743
This PR addresses a critical issue with useVirtualizer compatibility when used alongside the React compiler. Previously, the React compiler would cache results based on the virtualizer instance, preventing updates when virtual items changed.
The solution implements a wrapper using Object.create around the virtualizer instance.
This approach maintains the internal state while allowing the instance reference to change.
The internal state remains constant across updates, with only the instance reference being modified when virtual items change.
This change affects object property behavior. Spread operations and Object.keys() on the virtualizer now return empty results. This impacts code relying on these operations and could be considered a breaking change.
If this, or the
getVirtualItemseager evaluation, is a cause of concern we could make the transformation opt-in via option flag or could even be implemented externally as a separate hook.