CodeParkThe React Compiler is an opt-in build-time tool that memoizes your components automatically. It is usually added as a Babel plugin or through a framework integration.
It analyses components and hooks. It then memoizes values, functions and JSX for you. This gives the effect of memo, useMemo and useCallback without writing them.
It relies on your code following the Rules of React. These are React's rules for correct code. Components and hooks must be pure, so they never change props, state or outside values during render. Hooks must follow the rules of hooks. When the compiler finds code it cannot safely optimise, it skips that component and leaves it as it is.
For new code, you can mostly stop adding manual memoization. useMemo and useCallback stay available as escape hatches, for when you need precise control. An example is controlling an effect's dependencies.
The compiler reduces unnecessary re-renders. But it does not shrink your bundle. It also does not speed up slow components that really must re-render.
- The React Compiler is a build-time tool that you opt into.
- It memoizes values, functions and JSX automatically.
- It needs code that follows the Rules of React, and it skips code it cannot optimise safely.
- Manual memoization is mostly unnecessary, but the hooks stay as escape hatches.
- It does not fix bundle size or renders that are really slow.