The real-world impact of the React Compiler (formerly React Forget). The promise of this tool is to automate memoization, theoretically freeing developers from the manual overhead of useMemo, useCallback, and React.memo.
The Problem: Manual Memoization
React re-renders are cascading; a change in a parent component triggers a re-render for all children unless stopped by memoization. Manually implementing this is often complex and leads to:
- Referential instability: Objects and functions recreated on every render.
- "Prop drilling" complexity: Tracing memoization through long component chains.
- Messy code: Over-use of hooks making the codebase unreadable.
The Compiler's Performance
1. Initial Load Performance
One major concern was that memoizing "everything" would bloat the initial load. However, the tests showed minimal to no impact on initial load times. The compiler is efficient enough that the overhead is negligible.
2. Interaction Performance
The results here were mixed but generally positive:
- Best Case: On a settings preview page, total blocking time dropped from 280ms to 0ms.
- Realistic Case: On a gallery page, blocking time dropped from 130ms to 90ms. The compiler eliminated many re-renders, but some heavy components still re-rendered due to unstable data references from external libraries (like React Query).
3. Can it catch everything?
No. The investigation found the compiler failed to stop all re-renders in 7 out of 9 complex cases. Reasons include:
- Incompatibility with certain external libraries.
- Legacy code structures the compiler doesn't yet understand.
- Non-primitive props (objects/arrays) that change references outside of the component's scope.
React 18 Vs React 19
React 18 made rendering smarter. React 19 improves performance more by reducing work the browser has to do, loading resources earlier, and making async updates feel faster.
However, you have to opt-in to these improvements. It’s not that every render is magically faster; the biggest gains come from using the new React 19 patterns.
React Compiler is often discussed with modern React because it can automatically memoize components and reduce unnecessary re-renders, but simply upgrading to React 19 does not automagically mean your app is using the compiler; it must be configured in your build setup.
1. Less JavaScript sent to the browser
React 19 stabilizes Server Components, which let parts of your UI run on the server or at build time instead of in the browser. That means the user may download less JavaScript, parse less code, and see content sooner. React’s docs give an example where expensive markdown libraries are not included in the client bundle when moved into a Server Component. (react.dev)
Simple analogy:
React 18 often ships more of the “kitchen” to the customer. React 19 can cook more on the server and only send the finished meal.
2. Better loading of CSS, scripts, fonts, and other resources
React 19 adds better support for things like stylesheets, async scripts, and preload/preconnect APIs. This helps the browser discover important files earlier and avoid duplicated scripts or styles. React’s release notes specifically say these resource APIs can improve initial page loads and client-side navigations. (react.dev)
Simple example:
Instead of waiting until a component appears to discover its font or script, React can help the browser start fetching it earlier.
3. Smoother forms and async updates
React 19 adds Actions, useActionState, useFormStatus, and useOptimistic. These don’t necessarily make the CPU faster, but they make the app feel faster because React can show pending states and optimistic UI more naturally. For example, useOptimistic can immediately show the expected result while the server request is still running. (react.dev)
Simple example:
You click “Save,” and the UI updates right away instead of waiting for the server to respond.
4. Better Suspense/data handling with use
React 19’s use API lets components read promises during render and suspend until data is ready. Used with Suspense and frameworks, this can help avoid awkward loading flows and make async rendering more coordinated. (react.dev)
Simple version:
React gets better at saying, “Pause this part until the data is ready, but keep the rest of the page moving.”
5. More resilient hydration
Hydration is when React connects server-rendered HTML to interactive JavaScript in the browser. React 19 improves how hydration handles unexpected tags from third-party scripts or browser extensions, reducing cases where React has to throw away server HTML and re-render on the client. (react.dev)
Why that matters:
Less unnecessary re-rendering means fewer janky page loads.
6. Faster JSX transform requirement
React 19 requires the modern JSX transform, which React says enables additional improvements including JSX speed improvements and faster performance. (react.dev)
Important caveat
React 19 is not simply “React 18 but every render is faster.” React 18 already introduced major performance features like automatic batching, transitions, and streaming server rendering. (react.dev) React 19’s performance benefits mostly come when you use its newer architecture: Server Components, better resource loading, Actions, Suspense patterns, and modern tooling.
Again, React Compiler is often discussed with modern React because it can automatically memoize components and reduce unnecessary re-renders, but simply upgrading to React 19 does not automagically mean your app is using the compiler; it must be configured in your build setup. (react.dev)
Bottom line:
React 18 made updates smoother. React 19 helps apps load less, fetch smarter, hydrate more reliably, and feel faster during async work.
⚠️
While the React Compiler is a massive step forward, developers seeking to squeeze every millisecond of performance out of their apps will still need to understand and occasionally implement manual memoization.