What is the React Compiler (React Forget)?

The React Compiler (formerly known as React Forget) automatically optimizes your components by adding memoization where needed - eliminating the need for manual useMemo, useCallback, and React.memo.

#### Before React Compiler

     function TodoList({ todos, filter }) {
       // Manual optimization needed
       const filteredTodos = useMemo(() => {
         return todos.filter(todo => todo.status === filter);
       }, [todos, filter]);

       const handleToggle = useCallback((id) => {
         toggleTodo(id);
       }, [toggleTodo]);

       return (
         <div>
           {filteredTodos.map(todo => (
             <TodoItem 
               key={todo.id} 
               todo={todo} 
               onToggle={handleToggle} 
             />
           ))}
         </div>
       );
     }

     // Need to wrap in React.memo
     export default React.memo(TodoList);
     

#### With React Compiler

     function TodoList({ todos, filter }) {
       // Compiler automatically optimizes this!
       const filteredTodos = todos.filter(todo => todo.status === filter);

       const handleToggle = (id) => {
         toggleTodo(id);
       };

       return (
         <div>
           {filteredTodos.map(todo => (
             <TodoItem 
               key={todo.id} 
               todo={todo} 
               onToggle={handleToggle} 
             />
           ))}
         </div>
       );
     }

     // No React.memo needed!
     export default TodoList;
     

#### How It Works

1. Analyzes code during build time
2. Identifies expensive calculations and renders
3. Automatically inserts memoization where beneficial
4. Preserves React semantics - your code still behaves correctly

#### Benefits

• ✅ Simpler code - no manual optimization
• ✅ Better performance by default
• ✅ Fewer bugs from incorrect dependencies
• ✅ Easier to maintain and read
• ✅ Works with existing code

#### Enabling React Compiler

     // next.config.js (Next.js)
     module.exports = {
       experimental: {
         reactCompiler: true
       }
     }

     // vite.config.js (Vite)
     import { defineConfig } from 'vite'
     import react from '@vitejs/plugin-react'

     export default defineConfig({
       plugins: [
         react({
           babel: {
             plugins: [['babel-plugin-react-compiler']]
           }
         })
       ]
     })
     

#### When to Still Use Manual Optimization

     // For external libraries without Compiler support
     import { expensiveLibFunction } from 'old-library';

     function MyComponent() {
       // May still need manual memoization here
       const result = useMemo(() => expensiveLibFunction(), []);
       return <div>{result}</div>;
     }
     

#### Compatibility

• Works with React 18.3+ and React 19
• Compatible with TypeScript
• Works with all React hooks
• Supports Server Components and Client Components