Tại sao bạn nên bật "--react-compiler" trong dự án Next.js mới nhất?

npx create-next-app@latest marnext --app --src-dir --ts --tailwind --react-compiler
# --app: sử dụng App Router
# --src-dir: đặt /app trong thư mục /src 
# --ts (hoặc --typescript): ngôn ngữ chính là TS
# --tailwind: có tailwind (optional)
# --react-compiler: có react compiler

// ❌ Trước — manual memoization, dài dòng và dễ sai
import { useMemo, useCallback, memo } from 'react'

const ProductList = memo(function ProductList({ products, onSelect }) {
  const sorted = useMemo(() => {
    return [...products].sort((a, b) => a.price - b.price)
  }, [products])

  const handleSelect = useCallback((id: string) => {
    onSelect(id)
  }, [onSelect])

  return (
    <ul>
      {sorted.map(p => (
        <ProductItem key={p.id} product={p} onClick={() => handleSelect(p.id)} />
      ))}
    </ul>
  )
})

// ✅ Sau — clean, đơn giản, compiler lo phần còn lại
function ProductList({ products, onSelect }) {
  const sorted = [...products].sort((a, b) => a.price - b.price)

  const handleSelect = (id: string) => {
    onSelect(id)
  }

  return (
    <ul>
      {sorted.map(p => (
        <ProductItem key={p.id} product={p} onClick={() => handleSelect(p.id)} />
      ))}
    </ul>
  )
}

// ❌ Sai — mutate props trực tiếp
function BadComponent({ items }) {
  items.push({ id: 99, name: 'Extra' }) // KHÔNG ĐƯỢC làm thế này
  return <List items={items} />
}

// ✅ Đúng — tạo array mới
function GoodComponent({ items }) {
  const extended = [...items, { id: 99, name: 'Extra' }]
  return <List items={extended} />
}

// ❌ Sai
function Page() {
  return <div>{Header()}</div> // gọi trực tiếp như function
}

// ✅ Đúng
function Page() {
  return <div><Header /></div> // dùng như JSX
}

// ❌ Sai — hook trong điều kiện
function Component({ isLoggedIn }) {
  if (isLoggedIn) {
    const [data, setData] = useState(null) // KHÔNG ĐƯỢC
  }
}

// ✅ Đúng — hook luôn ở top level
function Component({ isLoggedIn }) {
  const [data, setData] = useState(null)
  // ...
}

npm install --save-dev eslint-plugin-react-hooks@latest

import reactHooks from 'eslint-plugin-react-hooks'

export default [
  {
    plugins: {
      'react-hooks': reactHooks,
    },
    rules: {
      ...reactHooks.configs['recommended-latest'].rules,
    },
  },
]

npx eslint src/

npm install babel-plugin-react-compiler@latest

// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  reactCompiler: true,
}

export default nextConfig

const nextConfig: NextConfig = {
  reactCompiler: {
    compilationMode: 'annotation',
  },
}

function HeavyComponent() {
  'use memo'
  // compiler sẽ tối ưu component này
}

function ProblematicComponent() {
  'use no memo'
  // compiler sẽ bỏ qua component này
}