The Dependency Array Problem

If you've written React at scale over the last five years, you have inevitably fought the dependency array. You've memorized the rules of hooks. You've carefully wrapped functions in useCallback to prevent infinite re-render loops in child components. But let's be honest: humans are terrible at manual memory management, and manual memoization is just memory management for UI.

Enter React Compiler (formerly 'React Forget')

The React Compiler shifts this burden from the developer to the build step. It's not just a syntax transformation; it deeply understands the flow of data through your component.

Before the Compiler

function VideoPlayer({ src, title }) {
  // If we don't memoize this, any re-render of VideoPlayer 
  // causes the VideoControls to re-render, even if 'title' hasn't changed.
  const controlsData = useMemo(() => {
    return parseControls(title);
  }, [title]);

  return (
    <div>
      <video src={src} />
      <VideoControls data={controlsData} />
    </div>
  );
}

After the Compiler

With the compiler enabled, you simply write:

function VideoPlayer({ src, title }) {
  const controlsData = parseControls(title);

  return (
    <div>
      <video src={src} />
      <VideoControls data={controlsData} />
    </div>
  );
}

Behind the scenes, the compiler generates a structure that looks closer to this:

function VideoPlayer({ src, title }) {
  const $ = _c(3); // a secret array allocated for memoization
  let controlsData;

  if ($[0] !== title) {
    controlsData = parseControls(title);
    $[0] = title;
    $[1] = controlsData;
  } else {
    controlsData = $[1];
  }

  // ... similar caching mechanism for the JSX output
}

The compiler uses SSA (Static Single Assignment) form and data flow analysis to determine exactly when a value actually changes. It then inserts caching logic automatically.

The Impact on Codebases

We recently migrated a dense 100k LOC dashboard to utilize the React Compiler.

1. We deleted over 4,000 instances of useMemo and useCallback.
2. The initial bundle size decreased slightly (the compiler's caching logic is often terser than human-written hook arrays).
3. The application felt fundamentally snappier. Removing developer errors (where a dependency was missed, breaking memoization silently) led to widespread, passive performance gains.

The React Compiler is the final realization of React's original promise: write declarative UI, and let the system figure out the cheapest way to update the screen.