|
| 1 | +--- |
| 2 | +description: When writing or editing React components and hooks that need memoization |
| 3 | +--- |
| 4 | + |
| 5 | +# React Compiler Memoization Rule |
| 6 | + |
| 7 | +This project runs **React 19.2** with **`babel-plugin-react-compiler` in annotation mode**. Memoization is the React Compiler's job, not the developer's. Do not reach for `useMemo` / `useCallback` as a first instinct — add the `'use memo'` directive to the component or hook body instead, and write plain values and plain functions. |
| 8 | + |
| 9 | +## Why |
| 10 | + |
| 11 | +1. The compiler analyzes dependencies and inserts caching automatically, including cases that are hard or impossible to express with manual `useMemo` / `useCallback` dependency arrays (e.g., stable references across conditional code paths, partial memoization of branches). |
| 12 | +2. Manual dependency arrays drift out of sync as code evolves — the compiler's view is always up to date with the code it compiles. |
| 13 | +3. `useCallback` cascades: wrapping one function in `useCallback` forces every caller that depends on its identity (child components, other hooks) to also memoize. The compiler breaks this cascade. |
| 14 | +4. Inline arrow functions passed to JSX (`onClick`, `action`, etc.) are already memoized by the compiler under `'use memo'`; wrapping them is noise. |
| 15 | +5. Consistent adoption across the codebase keeps the memoization story legible — reviewers don't have to decide case-by-case whether a given `useCallback` is load-bearing or ceremonial. |
| 16 | + |
| 17 | +## Rules |
| 18 | + |
| 19 | +1. **Add `'use memo'` at the top of every component body and every custom hook body** that would benefit from memoization. This is almost all of them. Never remove an existing `'use memo'` directive. |
| 20 | +2. **Do not introduce `useMemo` or `useCallback`** in new code. Replace existing usages with plain values and plain functions when you touch them, and add `'use memo'` if the enclosing function doesn't already have it. |
| 21 | +3. **Callbacks passed to JSX** (`onClick`, `onChange`, `action`, `onSubmit`, …) must be plain inline or named functions. The compiler memoizes them. |
| 22 | +4. **Values derived from props / state** should be plain `const` declarations. If the derivation is expensive *and* measurably slow, consider extracting to a separate module or a hook — but still no `useMemo`. |
| 23 | +5. **Exception — `useEffectEvent`**: when you need a callback inside an effect that should read the latest props/state without triggering re-runs, use `useEffectEvent` (see `use-effect-event.md`). This is complementary to `'use memo'` and does not replace it. |
| 24 | +6. **Exception — identity-sensitive external APIs**: if a third-party API requires a stable reference across renders (e.g., a subscription that can only be installed once), prefer `useRef` or an effect-scoped closure over `useCallback`. `useCallback`'s identity guarantees are still weaker than the compiler's. |
| 25 | + |
| 26 | +## Pattern |
| 27 | + |
| 28 | +### ✅ Correct — plain functions, `'use memo'` directive |
| 29 | + |
| 30 | +```tsx |
| 31 | +const UserProfile: React.FC<Props> = ({ user, onSelect }) => { |
| 32 | + 'use memo'; |
| 33 | + const { t } = useTranslation(); |
| 34 | + |
| 35 | + const fullName = `${user.firstName} ${user.lastName}`; |
| 36 | + |
| 37 | + const handleClick = () => { |
| 38 | + onSelect(user.id); |
| 39 | + }; |
| 40 | + |
| 41 | + return ( |
| 42 | + <button onClick={handleClick}> |
| 43 | + {t('userProfile.Greet', { name: fullName })} |
| 44 | + </button> |
| 45 | + ); |
| 46 | +}; |
| 47 | +``` |
| 48 | + |
| 49 | +### ✅ Correct — custom hook with plain returned functions |
| 50 | + |
| 51 | +```tsx |
| 52 | +export const useSomething = (): [Value, (next: Value) => void] => { |
| 53 | + 'use memo'; |
| 54 | + const [value, setValue] = useState<Value>(initial); |
| 55 | + |
| 56 | + const update = (next: Value) => { |
| 57 | + setValue(next); |
| 58 | + // side effects here, reading latest closure values |
| 59 | + }; |
| 60 | + |
| 61 | + return [value, update]; |
| 62 | +}; |
| 63 | +``` |
| 64 | + |
| 65 | +### ❌ Wrong — manual `useCallback` wrapping a simple handler |
| 66 | + |
| 67 | +```tsx |
| 68 | +const UserProfile: React.FC<Props> = ({ user, onSelect }) => { |
| 69 | + // no 'use memo' |
| 70 | + const handleClick = useCallback(() => { |
| 71 | + onSelect(user.id); |
| 72 | + }, [onSelect, user.id]); |
| 73 | + |
| 74 | + return <button onClick={handleClick}>...</button>; |
| 75 | +}; |
| 76 | +``` |
| 77 | + |
| 78 | +### ❌ Wrong — `useMemo` for trivial derivations |
| 79 | + |
| 80 | +```tsx |
| 81 | +const UserProfile: React.FC<Props> = ({ user }) => { |
| 82 | + // no 'use memo' |
| 83 | + const fullName = useMemo( |
| 84 | + () => `${user.firstName} ${user.lastName}`, |
| 85 | + [user.firstName, user.lastName], |
| 86 | + ); |
| 87 | + return <span>{fullName}</span>; |
| 88 | +}; |
| 89 | +``` |
| 90 | + |
| 91 | +## Migration |
| 92 | + |
| 93 | +When editing a file that contains `useMemo` or `useCallback`: |
| 94 | + |
| 95 | +1. Add `'use memo'` to the enclosing component / hook body if it is not already there. |
| 96 | +2. Unwrap each `useMemo(() => expr, deps)` into `const value = expr;`. |
| 97 | +3. Unwrap each `useCallback(fn, deps)` into the original function body, as a plain `const fn = (...)` or inline in JSX. |
| 98 | +4. Drop the `useMemo` / `useCallback` import if it becomes unused. |
| 99 | +5. Run `bash scripts/verify.sh` — the React Compiler is part of the build pipeline; if the compiler cannot safely memoize something (e.g., mutation in a closure), the lint rule `react-hooks/*` or the build itself will surface the problem. |
| 100 | + |
| 101 | +## Verification |
| 102 | + |
| 103 | +After editing a memoization-relevant file, confirm: |
| 104 | + |
| 105 | +- `'use memo'` appears on the first line of the component / hook body. |
| 106 | +- No new `useMemo` or `useCallback` imports or calls were introduced. |
| 107 | +- `bash scripts/verify.sh` passes — the compiler is exercised during `pnpm run lint` and the TypeScript build. |
| 108 | +- For hooks: existing call sites still behave correctly. The compiler's output is observably equivalent to the hand-rolled version in almost every case; if not, the compiler surfaces a diagnostic. |
| 109 | + |
| 110 | +## Related |
| 111 | + |
| 112 | +- `use-effect-event.md` — companion rule for the `useEffectEvent` primitive used inside effects. |
| 113 | +- `CLAUDE.md` → "React Essentials" — project-wide React conventions, including the `'use memo'` requirement. |
0 commit comments