Lifting state up là gì và khi nào cần làm?

Lifting state up là chuyển state lên component cha chung gần nhất khi có từ hai component trở lên cần cùng một dữ liệu. Vì dữ liệu trong React chảy một chiều từ trên xuống, hai component anh em không nói chuyện trực tiếp được — chỗ duy nhất cả hai cùng với tới là cha của chúng.

Ví dụ kinh điển là hai ô nhập nhiệt độ, một theo Celsius và một theo Fahrenheit, phải luôn khớp nhau:

function Converter() {
  const [celsius, setCelsius] = useState(20)   // state sống ở cha

  return (
    <>
      <TempInput scale="C" value={celsius} onChange={setCelsius} />
      <TempInput scale="F" value={toF(celsius)} onChange={(f) => setCelsius(toC(f))} />
    </>
  )
}

Mỗi ô nhập trở thành controlled component: nó không giữ state riêng, chỉ nhận value và báo ngược lên qua onChange. Nhờ vậy không bao giờ có hai nguồn sự thật cho cùng một con số.

Dấu hiệu nên lift state: hai component anh em bị lệch nhau; bạn phải viết code đồng bộ hai state; hoặc cùng một dữ liệu được fetch ở hai chỗ.

Dấu hiệu đã lift quá đà: state nằm ở cha nhưng chỉ một component dùng; hoặc prop phải đi qua bốn, năm tầng chỉ để tới nơi cần (prop drilling). Lúc đó nên cân nhắc Context cho dữ liệu ít đổi như theme hay user, hoặc một thư viện quản lý state cho dữ liệu đổi liên tục.

Lưu ý: Đừng lift mọi thứ lên gốc cho tiện. State đặt càng cao thì cây con phải render lại càng lớn ở mỗi lần đổi. Quy tắc là đặt state ở cha chung gần nhất, không phải ở cha cao nhất.