Co znamená lifting state up (zvednutí stavu)?

Question

Accepted Answer

**Lifting state up** znamená přesunout stav z podřízeného komponenty do **společného nadřazeného** prvku, aby více podřízených komponent mohlo sdílet a zůstat synchronizované se stejnými daty. Jedná se o standardní řešení, když sibling komponenty potřebují koordinaci. ## Problém: sibling komponenty potřebují sdílená 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 ``` Jestliže dvě sibling komponenty drží každá svou vlastní kopii souvisejícího stavu, neexistuje způsob, jak by zůstaly konzistentní — změna jedné neovlivní druhou. ## Řešení: zvednutí stavu k nadřazenému prvku ```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)} />; } ``` Sdílený stav se nyní nachází v nadřazeném prvku (`Calculator`). Předává hodnotu *dolů* jako prop a setter, aby mohly děti požádat o změny (*nahoru*). Nyní oba inputy odrážejí stejný zdroj — úprava jednoho aktualizuje oba. ## Vzor ```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) ``` Toto je stejný "data dolů, events nahoru" tok, aplikovaný na sdílení stavu. ## Když se lifting stává příliš velký ```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. ``` ## Proč na tom záleží Lifting state up je základní technika pro **sdílení stavu mezi sibling/souvisejícími komponentami** v frameworcích založených na komponentách — zajišťuje jediný zdroj pravdy v společném nadřazeném prvku, aby zůstaly děti synchronizované. Je to často *první* nástroj, na který se obrátit před přidáním Context nebo store. Rozeznání, kdy zvedat (sibling komponenty potřebují koordinaci) — a kdy se lifting zašel příliš daleko (způsobuje prop drilling, takže je čas na Context/store) — je klíčové pro dobrou strukturu stavu komponent.