Što znači podizanje stanja?

Question

Accepted Answer

**Podizanje stanja** znači premještanje stanja iz child komponente u **zajedničkog roditeljskog elementa** tako da više djece može dijeliti i ostati sinkronizirano s istim podacima. To je standardno rješenje kada sibling komponente trebaju koordinaciju. ## Problem: siblingi trebaju dijeljena 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 ``` Ako dvije sibling komponente svaka drži vlastitu kopiju povezanog stanja, nema načina da ostanu dosljedne — promjena jedne ne utječe na drugu. ## Rješenje: podignite stanje do roditeljskog elementa ```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)} />; } ``` Dijeljenije stanje sada živi u roditeljskom elementu (`Calculator`). Prosleđuje vrijednost *prema dolje* kao prop i setter kako bi djeca mogla tražiti promjene (*prema gore*). Sada oba ulaza odražavaju isti izvor — uređivanje jednog ažurira oba. ## Obrazac ```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) ``` Ovo je isti tok "podaci prema dolje, događaji prema gore", primijenjen na dijeljenjenje stanja. ## Kada podizanje postaje premnogo ```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. ``` ## Zašto je to važno Podizanje stanja je temeljni pristup za **dijeljenje stanja između sibling/povezanih komponenti** u framework-ima temeljenim na komponentama — čuva jedan izvor istine u zajedničkom roditeljskom elementu kako bi djeca ostala sinkronizirana. To je često *prvi* alat koji trebate koristiti prije nego što dodate Context ili store. Prepoznavanje kada trebate podići (siblingi trebaju koordinaciju) — i kada je podizanje prešlo границе (što uzrokuje prop drilling, pa je vrijeme za Context/store) — ključno je za dobro strukturiranje stanja komponenti.