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 ở chỗ viết JSX, chứ không phải chỗ render nó.

Nếu component nặng do một component ở tầng trên tạo ra (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 đó.

// Trước: mỗi lần đổi state là ExpensiveTree re-render
function Page() {
  const [color, setColor] = useState('red')
  return (
    <div style={{ color }}>
      <input value={color} onChange={e => setColor(e.target.value)} />
      <ExpensiveTree />
    </div>
  )
}

// Sau: ExpensiveTree tạo ở App rồi truyền xuống qua 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.