The React Compiler is a build-time Babel plugin that automatically memoizes React components, eliminating the need for manual useMemo, useCallback, and React.memo. Instead of inserting hook calls, it generates lightweight cache-slot checks using reference equality. The compiled output can memoize values after early returns (where hooks are illegal), and skips child re-renders by reusing identical JSX element objects. Setup is covered for Vite, Next.js, and Expo (enabled by default in SDK 54+). The compiler supports React 17 and 18 via a polyfill runtime package. Existing useMemo calls should be left in place initially due to subtle effect-firing risks. The compiler skips components that violate Rules of React, and opt-out/opt-in directives ('use no memo'/'use memo') are available. Real-world numbers from Meta, Sanity, and Wakelet show 10–30% render time improvements.

β€’18m read timeβ€’From neciudan.dev
Post cover image
Table of contents
What is it πŸ”—What the compiled output actually looks like πŸ”—How it skips re-renders without React.memo πŸ”—How to turn it on πŸ”—Which React versions does it work with πŸ”—What happens to your existing useMemo and useCallback πŸ”—When the compiler skips your component πŸ”—What it doesn’t do πŸ”—The numbers πŸ”—Where this leaves you πŸ”—References πŸ”—
8.6K Impressions