Skip to content

docs: clarify React Compiler 🧠 emoji usage in React Dev Tools #7863

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.

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
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
11 changes: 10 additions & 1 deletion src/content/learn/react-compiler.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@


---
title: React Compiler
---
Expand Down Expand Up @@ -317,6 +319,13 @@ React Compiler can verify many of the Rules of React statically, and will safely

[React DevTools](/learn/react-developer-tools) (v5.0+) and [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) have built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler.

Additionally, React DevTools shows different indicators for memoized components:

* **🧠 Brain emoji** - appears next to components that have been manually wrapped with [`memo()`](/reference/react/memo)
* **"Memo ✨" badge** - appears next to components that have been automatically optimized by React Compiler

This helps you distinguish between manual optimizations you've added and automatic optimizations applied by the compiler.

### 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 All @@ -343,4 +352,4 @@ When you make the error go away, confirm that removing the opt out directive mak

### Other issues {/*other-issues*/}

Please see https://github.com/reactwg/react-compiler/discussions/7.
Please see https://github.com/reactwg/react-compiler/discussions/7.