React 19: Chấm dứt kỷ nguyên useMemo thủ công

Suốt nhiều năm, React Developer phải khổ sở cân nhắc: "Chỗ này có nên dùng useMemo không?", "Quên useCallback ở đây có sao không?".

React 19 với React Compiler (tên mã: React Forget) sẽ giải phóng bạn khỏi gánh nặng đó.

1. Vấn đề của React hiện tại

React render lại quá nhiều (Over-rendering). Theo mặc định, khi cha render, tất cả con render lại. Để ngăn chặn, chúng ta phải dùng thủ công:

• React.memo
• useMemo
• useCallback

Nếu bạn quên 1 chỗ? Toàn bộ công sức tối ưu đổ sông đổ bể. Nếu bạn dùng quá nhiều? Code trở nên khó đọc và rối rắm.

2. React Compiler làm gì?

Compiler là một tool chạy trong quá trình build (như Babel). Nó "hiểu" code JavaScript của bạn sâu sắc. Nó tự động phát hiện:

• Biến nào phụ thuộc vào biến nào.
• Hàm nào không thay đổi.
• Component nào có thể cache lại.

Và nó tự động chèn code Memoization vào cấp thấp (Low level code mà bạn không nhìn thấy).

Trước Compiler (Code của bạn)

function ProductPage({ product }) {
  const price = useMemo(() => calculateTag(product.price), [product.price]);
  
  const handleBuy = useCallback(() => {
    addToCart(product);
  }, [product]);

  return <BuyButton onClick={handleBuy} label={price} />;
}

Sau Compiler (Code chạy thực tế)

Bạn chỉ cần viết code JS thuần túy!

function ProductPage({ product }) {
  // Compiler tự động nhận thấy 'price' chỉ đổi khi 'product.price' đổi.
  // Nó tự cache lại kết quả 'calculateTag'.
  const price = calculateTag(product.price);
  
  const handleBuy = () => addToCart(product);

  return <BuyButton onClick={handleBuy} label={price} />;
}

3. Lợi ích khổng lồ

1. DX (Developer Experience): Code sạch hơn 50%. Không còn dependency array [] nhức đầu.
2. Performance mặc định: Junior Dev viết code cũng nhanh như Senior Dev vì Compiler lo phần tối ưu.
3. Fine-grained Reactivity: React không cần render lại cả component, nó có thể update chính xác từng node DOM nhỏ nhất (như SolidJS hay Svelte).

4. Làm sao để dùng ngay hôm nay?

React Compiler hiện đã được tích hợp (Experimental) trong Next.js 15.

# next.config.ts
const nextConfig = {
  experimental: {
    reactCompiler: true, // Bật chế độ "God Mode"
  },
};

Kết luận

Đừng dành quá nhiều thời gian học thủ thuật useMemo phức tạp nữa. Tương lai là Auto-Memoization. Hãy tập trung vào Logic sản phẩm, phần khó nhất (Performance) hãy để máy móc lo.