Skip to content

docs[compiler]: clarify React DevTools support for Compiler Badges in React Native #7369

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Dec 16, 2024
Merged

docs[compiler]: clarify React DevTools support for Compiler Badges in React Native #7369

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d92bec6
docs[compiler]: clarify React DevTools support for Compiler Badges in…
piotrski Dec 16, 2024
c6d8e3b
Update react-compiler.md
gaearon Dec 16, 2024
62098b4
Update react-compiler.md
gaearon Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/content/learn/react-compiler.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,7 +347,7 @@ React Compiler can verify many of the Rules of React statically, and will safely

### How do I know my components have been optimized? {/*how-do-i-know-my-components-have-been-optimized*/}

[React Devtools](/learn/react-developer-tools) (v5.0+) has built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler.
[React Devtools](/learn/react-developer-tools) (v5.0+) has built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler. In React Native, this feature is available from version 0.75.0 onwards, since React Native bundles its own DevTools backend.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think we should remove the "5.0" thing and instead refer to the new React Native DevTools (default since 0.76)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think this would be better?

Suggested change
[React Devtools](/learn/react-developer-tools) (v5.0+) has built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler. In React Native, this feature is available from version 0.75.0 onwards, since React Native bundles its own DevTools backend.
[React Devtools](/learn/react-developer-tools) displays a "Memo ✨" badge next to components that have been optimized by the compiler. In React Native, this feature is part of the new DevTools (default since 0.76).


### Something is not working after compilation {/*something-is-not-working-after-compilation*/}
If you have eslint-plugin-react-compiler installed, the compiler will display any violations of the rules of React in your editor. When it does this, it means that the compiler has skipped over optimizing that component or hook. This is perfectly okay, and the compiler can recover and continue optimizing other components in your codebase. **You don't have to fix all ESLint violations straight away.** You can address them at your own pace to increase the amount of components and hooks being optimized.
Expand Down
Loading