React Compiler (React 19) là gì và nó tự động memo hóa những gì? Còn cần useMemo/useCallback/React.memo nữa không?

React Compiler là build-time compiler (Babel plugin) tự động tối ưu memoization, giúp bỏ phần lớn việc memo hóa thủ công.

Nó tự làm gì: phân tích component và hook, tự chèn memoization để bỏ qua tính toán và re-render khi input không đổi. Cụ thể nó tự memo hóa:
- Giá trị/biểu thức tính trong render (thay cho useMemo).
- Function tạo trong component (thay cho useCallback).
- Kết quả render của component khi props không đổi (vai trò của React.memo).

Nghĩa là với code tuân thủ Rules of React, không cần rải useMemo/useCallback/React.memo thủ công nữa — compiler lo cho bạn ở mức hạt mịn hơn (memo từng giá trị, không phải cả component).

Điều kiện: chỉ an toàn nếu component pure và theo đúng Rules of React (không mutate props/state, không side-effect trong render). ESLint plugin của compiler cảnh báo chỗ vi phạm; component nào không an toàn sẽ bị bỏ qua (skip), không tối ưu.

Lưu ý: useMemo/useCallback cũ vẫn chạy được, không cần xóa gấp, nhưng dần thành thừa. Compiler tối ưu re-render do tính toán/tham chiếu, không thay thế các tối ưu kiến trúc như virtualization hay code-splitting.

React Compiler is a build-time compiler (a Babel plugin) that automatically optimizes memoization, removing most manual memoization.

What it does: it analyzes components and hooks and inserts memoization to skip recomputation and re-renders when inputs are unchanged. Specifically it auto-memoizes:
- Values/expressions computed in render (replacing useMemo).
- Functions created in a component (replacing useCallback).
- A component's render output when props are unchanged (the role of React.memo).

So for code that follows the Rules of React, you no longer need to sprinkle manual useMemo/useCallback/React.memo — the compiler handles it at finer granularity (memoizing individual values, not whole components).

Conditions: it's only safe if components are pure and follow the Rules of React (no mutating props/state, no side effects during render). The compiler's ESLint plugin flags violations; components it deems unsafe are skipped, not optimized.

Note: existing useMemo/useCallback still work and don't need urgent removal, but become redundant. The compiler optimizes re-renders from computation/references; it does not replace architectural optimizations like virtualization or code-splitting.