Giải thích kỹ thuật truyền phần nặng qua `children` để tránh re-render, không cần `memo`.

Ý tưởng: element được tạo ở nơi nó được viết ra, không phải nơi nó được render.

Nếu component nặng được tạo bởi một component ở tầng trên (không có state hay thay đổi), thì component đang thay đổi state chỉ nhận nó dưới dạng prop children — tham chiếu không đổi, React bỏ qua việc render lại nhánh đó.

// Before: every state change re-renders ExpensiveTree
function Page() {
  const [color, setColor] = useState('red')
  return (
    <div style={{ color }}>
      <input value={color} onChange={e => setColor(e.target.value)} />
      <ExpensiveTree />
    </div>
  )
}

// After: ExpensiveTree is created in App, passed down as children
function ColorBox({ children }) {
  const [color, setColor] = useState('red')
  return (
    <div style={{ color }}>
      <input value={color} onChange={e => setColor(e.target.value)} />
      {children}
    </div>
  )
}

function App() {
  return <ColorBox><ExpensiveTree /></ColorBox>
}

Khi color đổi, ColorBox render lại nhưng children vẫn là cùng một element object từ lần render trước của App, nên React không render lại ExpensiveTree.

Ưu điểm so với memo: không cần so sánh props, không cần giữ tham chiếu ổn định thủ công, và cấu trúc rõ ràng hơn. Điều kiện: phần nặng không phụ thuộc vào state đang thay đổi — nếu nó cần đọc color thì kỹ thuật này không áp dụng được.