React Compiler Explained: Do We Still Need useMemo and useCallback?

React Compiler Explained: Do We Still Need useMemo and useCallback?

Introduction

One of the recurring challenges in React development is managing unnecessary re-renders and avoiding expensive calculations during component updates.

For years, developers have relied on tools such as useMemo, useCallback, and React.memo to control rendering behavior and improve performance.

Although these tools are useful, manual memoization introduces additional complexity. Developers must understand dependency arrays, preserve stable references, and decide which components or calculations actually need optimization.

React Compiler introduces a different approach: instead of requiring developers to manually identify every optimization opportunity, it analyzes React code at build time and automatically applies memoization where it can.

React Compiler reached its stable 1.0 release in October 2025. It is now suitable for production adoption, provided that applications follow React's rules and are properly tested.

In this article, we'll explore what React Compiler is, how automatic memoization works, whether traditional memoization Hooks are still necessary, and how to enable it in modern React applications.

What Is React Compiler?

React Compiler is a build-time optimization tool that analyzes React components and Hooks and automatically applies memoization to code that can be safely optimized.

In simple terms, it attempts to avoid unnecessary recalculations and re-renders without requiring developers to manually wrap every component, function, or computed value in memoization APIs.

Consider the following example:

import { useMemo, useCallback, memo } from "react";

const ProductList = memo(function ProductList({
  products,
  onSelect,
}: {
  products: Product[];
  onSelect: (id: string) => void;
}) {
  const sortedProducts = useMemo(
    () => products.toSorted((a, b) => a.price - b.price),
    [products]
  );

  const handleSelect = useCallback(
    (id: string) => {
      onSelect(id);
    },
    [onSelect]
  );

  return (
    <ul>
      {sortedProducts.map((product) => (
        <li key={product.id}>
          <button onClick={() => handleSelect(product.id)}>
            {product.name}
          </button>
        </li>
      ))}
    </ul>
  );
});

This component uses three memoization mechanisms to avoid unnecessary work.

With React Compiler enabled, in many cases, we can write the same component more naturally: