principlejavascriptreactTip
React Compiler (React 19) automatically memoizes — stop doing it manually
Viewed 0 times
React 19 / Next.js 15
react compilerreact forgetauto memoizationreact 19babel plugincompiler optimization
Problem
React 19 introduces the React Compiler (formerly React Forget), which automatically inserts useMemo, useCallback, and React.memo at the compiler level. Manually written memoization becomes redundant noise that the compiler still respects but doesn't need.
Solution
Write plain React code and let the compiler optimize. Remove unnecessary manual memoization:
// Before React Compiler — hand-written memoization
function Parent({ items }) {
const sortedItems = useMemo(
() => items.slice().sort((a, b) => a.name.localeCompare(b.name)),
[items]
);
const handleClick = useCallback((id) => {
setSelected(id);
}, []);
return <MemoizedList items={sortedItems} onSelect={handleClick} />;
}
// After React Compiler — write naturally
function Parent({ items }) {
const sortedItems = items.slice().sort((a, b) => a.name.localeCompare(b.name));
function handleClick(id) { setSelected(id); }
return <List items={sortedItems} onSelect={handleClick} />; // compiler memoizes automatically
}
// Install the Babel plugin or use Next.js 15+ which enables it by default
// babel.config.js
module.exports = {
plugins: [['babel-plugin-react-compiler', {}]]
};
// Before React Compiler — hand-written memoization
function Parent({ items }) {
const sortedItems = useMemo(
() => items.slice().sort((a, b) => a.name.localeCompare(b.name)),
[items]
);
const handleClick = useCallback((id) => {
setSelected(id);
}, []);
return <MemoizedList items={sortedItems} onSelect={handleClick} />;
}
// After React Compiler — write naturally
function Parent({ items }) {
const sortedItems = items.slice().sort((a, b) => a.name.localeCompare(b.name));
function handleClick(id) { setSelected(id); }
return <List items={sortedItems} onSelect={handleClick} />; // compiler memoizes automatically
}
// Install the Babel plugin or use Next.js 15+ which enables it by default
// babel.config.js
module.exports = {
plugins: [['babel-plugin-react-compiler', {}]]
};
Why
The compiler performs static analysis to identify stable values and functions across renders, inserting memoization precisely where it helps. It handles cases that are difficult to get right manually (like memoizing across component boundaries) and removes the cognitive overhead of the memoization decision.
Gotchas
- The compiler requires your code to follow the Rules of React — no mutations of props or state, hooks called unconditionally
- Components with violations are opted out automatically with a comment // eslint-disable react-compiler
- You can opt out a specific component with 'use no memo' directive
- The compiler doesn't replace state management — it only optimizes rendering
Code Snippets
Enable React Compiler in Next.js 15
// next.config.js — enable React Compiler in Next.js 15
module.exports = {
experimental: {
reactCompiler: true,
},
};Context
When upgrading to React 19 or evaluating whether to continue writing manual memoization
Revisions (0)
No revisions yet.