1# React Compiler
2 
3React Compiler is stable in Expo SDK 54 and later. It automatically memoizes components and hooks, eliminating the need for manual `useMemo`, `useCallback`, and `React.memo`.
4 
5## Enabling React Compiler
6 
7Add to `app.json`:
8 
9```json
10{
11  "expo": {
12    "experiments": {
13      "reactCompiler": true
14    }
15  }
16}
17```
18 
19## What React Compiler Does
20 
21- Automatically memoizes components and values
22- Eliminates unnecessary re-renders
23- Removes the need for manual `useMemo` and `useCallback`
24- Works with existing code without modifications
25 
26## Cleanup After Enabling
27 
28Once React Compiler is enabled, you can remove manual memoization:
29 
30```tsx
31// Before (manual memoization)
32const memoizedValue = useMemo(() => computeExpensive(a, b), [a, b]);
33const memoizedCallback = useCallback(() => doSomething(a), [a]);
34const MemoizedComponent = React.memo(MyComponent);
35 
36// After (React Compiler handles it)
37const value = computeExpensive(a, b);
38const callback = () => doSomething(a);
39// Just use MyComponent directly
40```
41 
42## Requirements
43 
44- Expo SDK 54 or later
45- New Architecture enabled (default in SDK 54+)
46 
47## Verifying It's Working
48 
49React Compiler runs at build time. Check the Metro bundler output for compilation messages. You can also use React DevTools to verify components are being optimized.
50 
51## Troubleshooting
52 
53If you encounter issues:
54 
551. Ensure New Architecture is enabled
562. Clear Metro cache: `npx expo start --clear`
573. Check for incompatible patterns in your code (rare)
58 
59React Compiler is designed to work with idiomatic React code. If it can't safely optimize a component, it skips that component without breaking your app.
60