React Compiler: můžu smazat všechna useMemo?

React Compiler je build-time nástroj, který analyzuje vaše komponenty a automaticky do nich vloží memoizaci. Výsledek odpovídá tomu, jako byste useMemo, useCallback a React.memo napsali všude, kde to dává smysl — jen jemněji, protože kompilátor umí memoizovat i jednotlivé JSX větve.

Zapnutí v Next.js

pnpm add -D babel-plugin-react-compiler

// next.config.ts
const nextConfig = {
  reactCompiler: true,
};
export default nextConfig;

Co se změní

// Dřív
const visible = useMemo(() => todos.filter((t) => !t.done), [todos]);
const onToggle = useCallback((id: string) => toggle(id), [toggle]);
 
// S kompilátorem
const visible = todos.filter((t) => !t.done);
const onToggle = (id: string) => toggle(id);

Obě varianty se chovají stejně — kompilátor sám pozná, na čem hodnota závisí.

Smím tedy smazat existující useMemo?

V nové kódové bázi je pište jen výjimečně. U existujícího kódu nespěchejte: kompilátor ruční memoizaci respektuje, a když ji odstraníte, může se změnit výstup memoizace — což vadí hlavně tam, kde je hodnota závislostí useEffect.

Ruční memoizace má smysl i dál jako escape hatch:

• když potřebujete přesně kontrolovat, kdy se efekt spustí (stabilní reference v závislostech),
• když předáváte hodnotu do knihovny, která porovnává reference, a chcete to mít explicitně.

Pravidla Reactu nejsou volitelná

Kompilátor předpokládá, že kód dodržuje Rules of React: čisté renderování, žádné mutace props a stavu, hooky jen na nejvyšší úrovni. Komponenty, které pravidla porušují, kompilátor přeskočí. Zapněte si ESLint pravidla z eslint-plugin-react-hooks (preset recommended obsahuje i pravidla kompilátoru) — upozorní vás na ně dřív než bug v produkci.

Problémovou komponentu dočasně vyřadíte direktivou "use no memo".