React: What is React Compiler?

React Compiler is a tool that automatically memoizes your code (React 19+). Previously, developers manually added useMemo, useCallback, React.memo. The compiler does it itself.

Simple analogy: Imagine you are writing a letter by hand. Before the compiler:

• You had to check for errors yourself (manually memoize).
• Fix mistakes (optimize). With the compiler, you just dictate the text, and the program itself corrects errors, puts commas, and formats.

What the compiler does:

1. Analyzes your code.
2. Determines which values and functions depend on props/state.
3. Automatically wraps them in useMemo/useCallback.
4. Applies React.memo to components where needed.

Before (with compiler — manually):

1const sorted = useMemo(() => list.sort(), [list]);
2const handleClick = useCallback(() => doSomething(), []);
3const Memoized = React.memo(MyComponent);

Now (with compiler):

1const sorted = list.sort();  // Compiler will understand what to memoize
2const handleClick = () => doSomething();
3<MyComponent />  // Compiler will memoize automatically

Advantages:

• Fewer errors — you won't forget useMemo.
• Cleaner code — without unnecessary wrappers.
• Faster — compiler optimizes better than a human.

Disadvantages:

• Need to update React to version 19.
• May incorrectly determine dependencies (but rarely).