Co oznacza 'lifting state up'?

Question

Accepted Answer

**Lifting state up** oznacza przeniesienie stanu z komponentu dziecka do **wspólnego rodzica**, aby wiele komponentów dziecka mogło współdzielić i pozostawać zsynchronizowane z tymi samymi danymi. Jest to standardowe rozwiązanie, gdy komponenty siostrzane muszą koordynować się. ## Dlaczego to ważne ```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 ``` Jeśli dwa komponenty siostrzane każdy przechowują swoją kopię powiązanego stanu, nie ma sposobu, aby pozostały spójne — zmiana jednego nie wpłynie na drugi. ## Rozwiązanie: przenieś stan do rodzica ```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)} />; } ``` Udostępniony stan teraz znajduje się w rodzicu (`Calculator`). Przekazuje wartość *w dół* jako prop i setter, aby komponenty dziecka mogły żądać zmian (*w górę*). Teraz oba inputy odzwierciedlają to samo źródło — edycja jednego aktualizuje oba. ## Wzorzec ```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) ``` To jest ten sam przepływ "dane w dół, zdarzenia w górę", zastosowany do udostępniania stanu. ## Gdy lifting staje się zbyt dużo ```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. ``` ## Dlaczego to ważne Lifting state up jest fundamentalną techniką **udostępniania stanu między komponentami siostrzanymi/powiązanymi** w frameworkach opartych na komponentach — utrzymuje pojedyncze źródło prawdy u wspólnego rodzica, aby komponenty dziecka pozostały zsynchronizowane. Często jest to *pierwsze* narzędzie, do którego sięgasz zanim dodasz Context lub store. Rozpoznawanie kiedy należy podnieść stan (komponenty siostrzane muszą koordynować) — i kiedy lifting zaszedł za daleko (powodując prop drilling, więc czas na Context/store) — jest kluczowe dla dobrej struktury stanu komponentu.