Lifting state up nghĩa là gì?

Question

Accepted Answer

**Lifting state up** (nâng state lên) nghĩa là chuyển state từ một component con lên **component cha chung** để nhiều component con có thể chia sẻ và đồng bộ với cùng một dữ liệu. Đây là giải pháp tiêu chuẩn khi các component anh em (sibling) cần phối hợp với nhau. ## Vấn đề: các sibling cần dữ liệu chung ```jsx // ❌ mỗi con có state RIÊNG — chúng không thể đồng bộ function TempInput() { const [temp, setTemp] = useState(0); ... } // Hai TempInput sibling (Celsius & Fahrenheit) không thể thấy giá trị của nhau ``` Nếu hai component sibling mỗi cái giữ bản sao riêng của state liên quan, không có cách nào để chúng nhất quán — thay đổi cái này không ảnh hưởng đến cái kia. ## Giải pháp: nâng state lên component cha ```jsx function Calculator() { const [temperature, setTemperature] = useState(0); // state được NÂNG lên cha return ( <> {/* truyền state XUỐNG dưới dạng prop, và một setter để cập nhật nó */}

Both inputs share one value: {temperature}

); } function TempInput({ value, onChange }) { return onChange(e.target.value)} />; } ``` State chia sẻ giờ nằm ở component cha (`Calculator`). Nó truyền giá trị *xuống* dưới dạng prop và một setter để các con có thể yêu cầu thay đổi (đẩy *lên*). Giờ cả hai input đều phản ánh cùng một nguồn — sửa cái này cập nhật cả hai. ## Mẫu (pattern) ```text 1. Tìm component tổ tiên CHUNG gần nhất của các component cần chia sẻ 2. Chuyển state LÊN component tổ tiên đó 3. Truyền giá trị XUỐNG dưới dạng props 4. Truyền một callback XUỐNG để các con có thể yêu cầu cập nhật (data đi lên qua event) ``` Đây chính là luồng "data down, events up", áp dụng để biến state thành chia sẻ. ## Khi việc lifting trở nên quá nhiều ```text Nâng quá cao (state nằm xa nơi sử dụng) → prop drilling. Đến lúc đó, hãy ưu tiên Context hoặc thư viện state thay vì nâng tiếp. ``` ## Tại sao điều này quan trọng Lifting state up là kỹ thuật nền tảng để **chia sẻ state giữa các component sibling/liên quan** trong các framework component-based — nó giữ một single source of truth ở component cha chung để các con đồng bộ với nhau. Đây thường là công cụ *đầu tiên* nên dùng trước khi thêm Context hay store. Nhận biết khi nào nên nâng (các sibling cần phối hợp) — và khi nào việc nâng đã đi quá xa (gây prop drilling, lúc đó nên dùng Context/store) — là cốt lõi của việc tổ chức state cho component tốt.