18. Lifting state up — wzorzec współdzielonego stanu

Lifting state up — stan tam gdzie potrzeba

“Lifting state up” to wzorzec React: gdy dwa siostrzane komponenty potrzebują dostępu do tego samego stanu, przenosimy (lifujemy) stan do ich najbliższego wspólnego przodka. Przodek zarządza stanem i przekazuje go przez props.

To fundamentalny wzorzec zarządzania stanem w React. Zanim sięgniesz po Context czy Redux, spróbuj lifting state up. Często wystarcza i jest prostsze.

1. Wyjaśnić kiedy lifting state up jest potrzebny
2. Opisać mechanizm — przeniesienie state do przodka, props w dół
3. Pokazać przykład: dwa filtry wpływające na tę samą listę
4. Omówić kiedy lifting staje się prop drilling

1. Problem — dwa komponenty potrzebują synchronizacji stanu
2. Lifting — przeniesienie state do wspólnego przodka
3. Callback props — jak dzieci informują rodzica o zmianie
4. Przykład — formularz i podgląd, dwie zakładki z wspólnym stanem
5. Granica — kiedy lifting staje się prop drilling, kiedy Context

• Struktura minimalna

1. Wstęp — problem synchronizacji stanu między rodzeństwem
2. Rozdział 1: Lifting state up — mechanizm, callback props
3. Rozdział 2: Przykłady — formularz+podgląd, dwa inputy
4. Rozdział 3: Kiedy lifting, kiedy Context
5. Podsumowanie
6. Bibliografia

Stan tam gdzie potrzebny — nie wyżej, nie niżej!

Użyj analogii: dwie siostry chcą słuchać tej samej piosenki — nie ma sensu żeby każda miała swój odtwarzacz, wystarczy jeden głośnik Bluetooth dla obu (wspólny przodek).