17. Prop drilling — problem i wzorce jego unikania

Prop drilling — gdy dane wędrują za daleko

Prop drilling to antywzorzec w React gdy props są przekazywane przez wiele poziomów komponentów, które ich samych nie używają — tylko przekazują dalej. Prowadzi do trudnego w utrzymaniu kodu, gdzie zmiana interfejsu jednego komponentu wymusza zmiany w całym łańcuchu.

Prop drilling to pierwsza “pułapka” React na jaką natrafia każdy developer. Rozpoznanie problemu i znanie rozwiązań (Context, composition, lifting state) to znak dojrzałości.

1. Opisać problem prop drilling na konkretnym przykładzie
2. Wyjaśnić rozwiązania: Context API, component composition
3. Omówić kiedy prop drilling jest akceptowalny (1-2 poziomy)
4. Porównać rozwiązania w tabeli

1. Problem — theme/user przekazywany przez 4+ poziomów
2. Rozwiązanie 1: Context API — Provider + useContext
3. Rozwiązanie 2: Component composition — children prop, slots
4. Rozwiązanie 3: State management — Zustand/Redux dla globalnych danych
5. Kiedy drilling jest OK — 1-2 poziomy, krótkie łańcuchy

• Struktura minimalna

1. Wstęp — props jako komunikacja między komponentami
2. Rozdział 1: Prop drilling — przykład, dlaczego to problem
3. Rozdział 2: Context API jako rozwiązanie
4. Rozdział 3: Composition i inne wzorce
5. Podsumowanie
6. Bibliografia

Zdiagnozuj problem zanim zaproponujesz rozwiązanie!

Poświęć cały pierwszy rozdział na POKAZANIE problemu prop drillingu z konkretnym kodem. Czytelnik musi “boleć” zanim doceni rozwiązanie.