You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
React Compiler is enabled in this codebase (`babel-plugin-react-compiler` runs first in both webpack and metro configs). It automatically memoizes components and hooks at the AST level — analyzing data flow, tracking dependencies, and inserting fine-grained caching that is more precise than any hand-written `useMemo`, `useCallback`, or `React.memo`.
11
+
12
+
Manual memoization is therefore:
13
+
14
+
1.**Redundant** — the compiler already handles it, so the manual wrapper adds zero value
15
+
2.**Harmful** — it interferes with the compiler's optimization model, potentially preventing it from applying its own caching strategy or causing double-wrapping
16
+
3.**Noisy** — it clutters the codebase with dependency arrays that must be maintained, reviewed, and debugged
17
+
18
+
The codebase enforces this via:
19
+
-**Babel plugin**: `babel-plugin-react-compiler` in `babel.config.js`
If the output contains **"Failed to compile"** for the file under review, the rule **does not apply** — the author may have no alternative to manual memoization until the compilation issue is resolved.
105
+
106
+
#### Condition
107
+
108
+
The verification step above is a prerequisite. Only flag when the file compiles successfully AND any of these are true in new or modified code:
109
+
110
+
1.**`useCallback`** — A function is wrapped in `useCallback`. The compiler automatically memoizes closures based on their captured variables.
111
+
2.**`useMemo`** — A value is wrapped in `useMemo`. The compiler automatically caches derived values.
112
+
3.**`React.memo`** — A component is wrapped in `React.memo` (or `memo` imported from React). The compiler automatically skips re-rendering components whose props haven't changed.
113
+
114
+
**Response:** Challenge the author: "React Compiler is enabled — remove the manual memoization and restructure the code so the compiler can handle it."
115
+
116
+
The goal is to fix the root cause (make code compiler-friendly) rather than slap on manual memoization as a workaround.
117
+
118
+
**Search Patterns:**
119
+
-`useCallback\s*\(` — manual callback memoization
120
+
-`useMemo\s*\(` — manual value memoization
121
+
-`React\.memo\s*\(` or `memo\s*\(` — manual component memoization
122
+
- Import statements: `useCallback`, `useMemo` from `react`
123
+
124
+
**DO NOT flag if:**
125
+
- The file does not compile with React Compiler (verified by the compliance check in the Verification section above)
126
+
- The code is inside `node_modules/`, `patches/`, or test fixtures
127
+
- The manual memoization exists in unchanged lines (pre-existing code not touched by the diff)
0 commit comments