When will you use this?

Learn this when you join a team on React 18/19 or Next.js — not required for your first todo app.

• New React apps may use Server Components and Suspense for faster first load.
• Next.js jobs expect you to know when code runs on server vs browser.

Real-world: less manual useMemo after upgrade

Large Flipkart codebase enables React Compiler — automatic memoization reduces hand-written useMemo/useCallback as team migrates to React 19.

Production-style code

// Before: manual memo everywhere
const total = useMemo(() => computeCommission(orders), [orders]);
const onSelect = useCallback(id => setSelected(id), []);

// After React Compiler (conceptual — compiler optimizes at build time):
function SellerReport({ orders }) {
  const total = computeCommission(orders); // compiler memoizes when safe
  function onSelect(id) { setSelected(id); }
  return <ReportTable orders={orders} total={total} onSelect={onSelect} />;
}

What happens in production: Long-term maintainability improves — engineers focus on business logic, not memoization ceremony.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

// Enable in build config — then write normal components:
function ExpensiveList({ items }) {
  return items.map(i => <Row key={i.id} item={i} />);
}
// Compiler may auto-memo Row renders when props unchanged

Line-by-line walkthrough

How it works (big picture)

• Still in rollout — follow react.dev/compiler docs.
• Components must follow Rules of React (pure render, proper hooks).

Do this on your computer

1. Read current compiler setup guide.
2. Enable in a branch and compare perf.
3. Remove redundant manual memos after verifying.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.
• Add one more item to the array in the example and confirm it appears in the list.
• Open React DevTools (browser extension) while running React Compiler and inspect component props/state.

Remember

Compiler = automatic memoization. Optional tooling, not required to learn React. Follow official install guide.

Common questions