React Compiler and the Future of Manual Memoization

Ever wondered why we're still talking about useMemo and useCallback in 2026? With the React Compiler (formerly React Forget) officially handling the heavy lifting, you'd think our manual optimization days were over. But as I've found while building out complex design systems recently, it's not quite that simple.

The React Compiler is a brilliant build-time tool that automatically optimizes your app by applying the equivalent of manual memoization where it's safe to do so. It's designed to solve the 'cascading re-render' problem that has plagued React devs for years. However, 'automatic' doesn't mean 'magic,' and there are specific scenarios where reaching for manual tools is still the right call.

The New Default: Write Plain React

For the vast majority of your components, the advice is now clear: just write plain React. The compiler is smart enough to see that a component's inputs haven't changed and skip the re-render. According to the official docs, you can safely remove React.memo from your components when using the compiler.

// Plain component: let the compiler handle re-render memoization
function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

In this example, the compiler automatically ensures that Button doesn't re-render unless label or onClick change. It's a massive weight off our shoulders, especially when dealing with deeply nested component trees.

When Manual Memoization Still Matters

If the compiler is so good, why keep the old hooks? The answer usually comes down to referential identity. The compiler optimizes for render performance, but it doesn't always guarantee that a function or object reference will remain identical across renders if it's being passed to something outside of React's immediate control.

Non-React consumers: If you're passing a value to a third-party library that uses object identity as a key in a Map or a dependency in its own internal logic, you need useMemo.
Stable Callbacks for Hooks: When a custom hook returns a function that will be used in an useEffect elsewhere, referential stability is a requirement, not just a performance hint.
Design System Primitives: Low-level components that need to work across different environments (some with the compiler, some without) benefit from explicit memo.

Maintaining Stable Callbacks

Let's look at a SearchBox. If the onSearch callback is used inside a subscription or a complex event listener, we want to ensure that reference stays steady.

// Keep manual memoization when a stable callback matters to consumers
function SearchBox({ onSearch }) {
  const handleSubmit = React.useCallback((term) => {
    onSearch(term);
  }, [onSearch]);

  return (
    <input 
      onKeyDown={e => e.key === 'Enter' && handleSubmit(e.target.value)} 
    />
  );
}

Compiler Directives and Gaps

We also have the new "use memo" directive. This is an explicit hint to the compiler. It must be the first statement in a function body. This is particularly useful if you are running the compiler in annotation mode, where only marked functions get the optimization treatment.

It's a common misconception that the compiler eliminates all need for thought. If your code is impure—say, you're mutating props or relying on non-deterministic values—the compiler will 'de-opt' (skip optimization) to avoid breaking your app. Purity is still the name of the game.

• • •

Wrapping Up

Use the compiler for standard re-render optimization and feel free to drop React.memo in most places.
Keep useMemo and useCallback for referential identity when values are consumed by non-React logic or complex hook chains.
Ensure your components remain pure; otherwise, the compiler won't be able to help you.

I'd encourage you to try running the React Compiler on a small part of your codebase first. See where it excels and where you still feel the need for that manual touch. It's a shift in mindset, but one that makes our lives much easier.

If you want to go deeper and learn how to build real, production-ready CSS design systems step by step, check out my full course here: CSS Design Systems Course

The long version with support labels and runnable demos is in Modern CSS 2026 on Amazon Kindle.

For more tips on React performance and design systems, follow me on Twitter or connect with me on LinkedIn.

Post not found