If you’ve been building complex React applications over the last few years, you are intimately familiar with the "memoization tax." We’ve all spent hours wrapping components in React.memo, variables in useMemo, and functions in useCallback, just to stop a rogue context update from re-rendering the entire page.
Well, as of React 19, the era of manual memoization is officially over.
The Problem: We Were Doing the Compiler's Job
Historically, React's rendering model was blunt: if state changes, re-render the component and all its children. To optimize this, developers had to act as human compilers, manually identifying which computations were expensive and caching them.
Not only did this pollute our codebases with useMemo hooks, but it also introduced subtle bugs when dependency arrays were inevitably misconfigured.
Enter the React Compiler
The React Compiler (formerly known as React Forget) changes everything. It is an ahead-of-time (AOT) compiler that understands your JavaScript and automatically applies fine-grained reactivity.
Instead of re-rendering everything, the compiler analyzes your code during the build step and automatically caches values and components that haven't changed.
Before React 19:
const UserProfile = ({ user, theme }) => {
const formattedName = useMemo(() => {
return `${user.firstName} ${user.lastName}`.toUpperCase();
}, [user.firstName, user.lastName]);
const handleClick = useCallback(() => {
console.log("Clicked:", formattedName);
}, [formattedName]);
return <Button onClick={handleClick}>{formattedName}