React 19 + Next.js 15: The “No-Memo” Future

For years, React developers have lived in fear of “unnecessary re-renders.” We cluttered our components with useMemo, useCallback, and React.memo, often guessing where the performance bottlenecks actually were.

With the stable release of the React Compiler in React 19 and its deep integration into Next.js 15, those days are officially over.

What is the React Compiler?

The React Compiler (formerly “React Forget”) is a build-time tool that understands the “Rules of React” at a deep level. It automatically memoizes your components, values, and functions so you don’t have to.

The result? Your code looks like plain JavaScript, but performs like highly optimized, hand-tuned React.

The “Before” vs. “After”

The Old Way (Manual Optimization)

We used to spend 20% of our time managing dependency arrays and function references just to keep the UI snappy.

// ❌ Cluttered with manual memoization
const ProductList = ({ items, onAdd }) => {
  const sortedItems = useMemo(() => {
    return [...items].sort((a, b) => a.price - b.price);
  }, [items]);
  const handleAdd = useCallback((id) => {
    onAdd(id);
  }, [onAdd]);
  return <List items={sortedItems} onAdd={handleAdd} />;
};

The New Way (Compiler Optimization)

In React 19, you just write the logic. The compiler handles the rest behind the scenes.

// ✅ Clean, readable, and just as fast
const ProductList = ({ items, onAdd }) => {
  // The compiler automatically memoizes this sort!
  const sortedItems = [...items].sort((a, b) => a.price - b.price);
  // The compiler automatically ensures this function reference is stable!
  const handleAdd = (id) => {
    onAdd(id);
  };
  return <List items={sortedItems} onAdd={handleAdd} />;
};

Key Highlights for Next.js 15 Developers

1. Stable Support: Next.js 15 fully supports React 19 and the Compiler. You can enable it in your next.config.ts with a simple flag:TypeScriptconst nextConfig = { experimental: { reactCompiler: true, }, };
2. The “use” Hook: React 19 introduces the use() hook, which allows you to read resources like Promises and Context directly during render. It works perfectly with Next.js Server Components.
3. Action Hooks: New hooks like useActionState and useFormStatus make handling form submissions and loading states incredibly easy without manual useState toggles.

Pro Tip: You don’t need to delete your old useMemo calls immediately. The compiler is smart enough to work alongside them. However, for all new code on your Mac development setup, aim for “Memo-Free” components and let the build tool do the heavy lifting.

Conclusion

React is finally becoming truly declarative. We are moving away from “How to optimize” and back to “What to build.” If you haven’t upgraded your projects to Next.js 15 yet, the performance gains from the React Compiler alone make it worth the switch.