chore: setup react compiler test and linting #6730
Merged
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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Ignored Deployment
|
|
No changes to documentation |
|
Component Testing Report Updated May 22, 2024 2:06 PM (UTC)
|
stipsan
force-pushed
the
test-react-compiler
branch
2 times, most recently
from
a7eccce
to
48960a5
Compare
stipsan
requested review from
jordanl17 and
binoy14
and removed request for
a team
|
New and removed dependencies detected. Learn more about Socket for GitHub ↗︎
|
stipsan
force-pushed
the
test-react-compiler
branch
from
48960a5
to
39f853f
Compare
binoy14
previously approved these changes
May 22, 2024
stipsan
force-pushed
the
test-react-compiler
branch
from
39f853f
to
bf9606f
Compare
binoy14
approved these changes
May 22, 2024
This was referenced Jun 24, 2024
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.
Description
Adds support for the React Compiler in the
test-next-studio. Also adds theeslint-plugin-react-compilerplugin, which warns us about areas in the codebase that the compiler will skip due to either breaking the rule of hooks, or the code being structured in a way where deps can't be inferred.Components that are memoized by the Compiler gets their own little sparkly badge in the React Devtools extension:
Why add the Compiler? Even though we can't fully reap the benefits of it until we're ready to drop react v18 and make v19 the new baseline, it's useful to be able to track how much perf is improved by the Compiler.
It's also usually a good thing for react v18 perf to refactor the codebase to fix hooks bugs, and to make the code structured so the compiler can fully understand it and optimize it.
We won't see a huge difference right away, as our codebase are in a state that's the combination of:
a) components that would benefit the most from the compiler is currently skipped by it (see
pnpm check:react-compilerand errors fromreact-compiler/react-compilerto see which ones, for example )b) most of the components that can be optimized by react-compiler and see a boost are already optimized by hand with
useMemo,useCallbackandmemo.We can work on a) over time and it benefits react v18 users as well as v19. While b) is something we can reap once we make v19 the baseline and we can delete all handwritten
useMemo,useCallbackandmemoinstances 🙌What to review
The change in
useSyncValueshould be fine, as it's functionally equivalent it's only refactored so it can be understood by the compiler.Testing
Existing tests should suffice, it only affects the
dev/test-next-studioproject. There's also a new CI check that tells us if the compiler can run on the full codebase or not.Notes for release
N/A