Ce înseamnă 'lifting state up'?

Question

Accepted Answer

**Lifting state up** înseamnă mutarea stării de la un component copil la un **părinte comun**, pentru ca mai mulți copii să poată partaja și rămână sincronizați cu aceleași date. Este soluția standard atunci când componentele frați trebuie să se coordoneze. ## Problema: frații au nevoie de date comune ```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 ``` Dacă doi componente frați dețin fiecare propria lor copie a unei stări înrudite, nu există nicio modalitate pentru ei să rămână consistenți — modificarea unuia nu afectează pe celalalt. ## Soluția: ridică starea la părinte ```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)} />; } ``` Starea partajată locuiește acum în părinte (`Calculator`). Acesta transmite valoarea *în jos* ca prop și un setter pentru ca copiii să poată solicita schimbări (*în sus*). Acum ambele intrări reflectă aceeași sursă — editarea uneia actualizează pe ambele. ## Modelul ```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) ``` Acesta este același flux "date în jos, evenimente în sus", aplicat la partajarea stării. ## Când lifting devine prea mult ```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. ``` ## De ce conteaza Lifting state up este tehnica fundamentală pentru **partajarea stării între componente frați/înrudite** în framework-uri bazate pe componente — menține o singură sursă de adevăr într-un părinte comun, pentru ca copiii să rămână sincronizați. Este adesea *primul* instrument la care apelezi înainte de a adăuga Context sau un store. Reconoașterea când trebuie să ridici (frații trebuie să se coordoneze) — și când ridicalul a mers prea departe (cauzând prop drilling, deci e momentul pentru Context/un store) — este esențial pentru o bună structurare a stării componentei.