Apa arti lifting state?

Question

Accepted Answer

**Lifting state** berarti memindahkan state dari komponen child ke **parent bersama** sehingga multiple children dapat berbagi dan tetap sinkron dengan data yang sama. Ini adalah solusi standar ketika sibling component perlu berkoordinasi. ## Masalah: siblings perlu shared data ```jsx // ❌ each child has its OWN state — they can't sync function TempInput() { const [temp, setTemp] = useState(0); ... } // Two sibling TempInputs (Celsius & Fahrenheit) can't see each other's value ``` Jika dua sibling component masing-masing memegang copy sendiri dari state terkait, tidak ada cara bagi mereka untuk tetap konsisten — mengubah satu tidak mempengaruhi yang lain. ## Solusi: lift state ke parent ```jsx function Calculator() { const [temperature, setTemperature] = useState(0); // state LIFTED to the parent return ( <> {/* pass state DOWN as a prop, and a setter to update it */}

Both inputs share one value: {temperature}

); } function TempInput({ value, onChange }) { return onChange(e.target.value)} />; } ``` Shared state sekarang hidup di parent (`Calculator`). Ini melewatkan nilai *ke bawah* sebagai prop dan setter sehingga children dapat meminta perubahan (*ke atas*). Sekarang kedua input mencerminkan sumber yang sama — mengedit satu memperbarui keduanya. ## Polanya ```text 1. Find the closest COMMON ancestor of the components that need to share 2. Move the state UP into that ancestor 3. Pass the value DOWN as props 4. Pass a callback DOWN so children can request updates (data up via events) ``` Ini adalah aliran "data ke bawah, events ke atas" yang sama, diterapkan untuk membuat state shared. ## Ketika lifting menjadi terlalu banyak ```text Lifting too high (state ends up far from where it's used) → prop drilling. At that point, prefer Context or a state library instead of lifting further. ``` ## Mengapa ini penting Lifting state adalah teknik fundamental untuk **berbagi state antar sibling/related components** dalam framework berbasis component — ini menjaga sumber kebenaran tunggal di parent bersama sehingga children tetap sinkron. Ini sering menjadi alat *pertama* yang harus digunakan sebelum menambahkan Context atau store. Mengenali kapan harus lift (siblings perlu berkoordinasi) — dan kapan lifting sudah berlebihan (menyebabkan prop drilling, jadi saatnya Context/store) — adalah inti dari menyusun component state dengan baik.