Memoization and Compiler

Memoization and the React Compiler

React 7,897 re-renders generously. When a component's state changes, React calls that component's function again and every component below it, and only then compares the result with what is on screen. The generosity is what lets you write components as plain functions of props and state instead of hand-wiring updates, and it is cheap — until "every component below it" means a thousand list rows, or one component whose render does real work.

The traditional fix is memoization: memo skips a component whose props did not change, useMemo caches a value between renders, and useCallback caches a function so a child wrapped in memo keeps seeing the same prop. All three hold on to last render's result plus a list of dependencies, and all three are easy to get wrong — a list one entry short returns a stale value, one entry too long returns a fresh object every time and buys nothing.

React Compiler 1.0, released on 7 October 2025, does that work at build time instead, which for most new applications makes all three unnecessary. They are not deprecated, and this section is explicit about where they still earn their place — but the order of the advice has flipped. Write the plain version, measure, and reach for a Hook only where the compiler cannot help.

Subsections