04. useEffect — efekty uboczne i cykl życia komponentu

useEffect — synchronizacja z zewnętrznym światem

useEffect to hook do synchronizacji komponentu React ze światem zewnętrznym — sieć, przeglądarka, timery, subskrypcje. Kluczowe koncepty: dependency array (kiedy efekt się uruchamia) i funkcja cleanup (co sprzątać po efekcie).

useEffect jest jednym z najczęściej używanych hooków i jednym z najtrudniejszych do zrozumienia. Błędy w dependency array powodują memory leaks, nieskończone pętle i stale data. Opanowanie useEffect to przejście z juniora na mid-level developera.

1. Wyjaśnić czym są efekty uboczne w React i dlaczego są poza renderowaniem
2. Opisać trzy warianty dependency array i ich znaczenie
3. Wyjaśnić funkcję cleanup — kiedy jest uruchamiana i co powinna robić
4. Pokazać najczęstsze błędy i jak ich unikać

1. Efekty uboczne — czym są: fetch, timer, DOM manipulation, subskrypcja
2. Dependency array — bez tablicy (każdy render), [] (raz po mount), [dep] (przy zmianie dep)
3. Funkcja cleanup — memory leaks, anulowanie fetch (AbortController), clearInterval
4. Pobieranie danych — klasyczny wzorzec fetch w useEffect z loading/error/data
5. Zasada ESLint — react-hooks/exhaustive-deps — dlaczego istnieje

• Struktura minimalna

1. Wstęp — czym są efekty uboczne, dlaczego React izoluje je od renderowania
2. Rozdział 1: Dependency array — trzy warianty z przykładami
3. Rozdział 2: Cleanup — co czyścić, memory leaks, AbortController
4. Rozdział 3: Praktyczne wzorce — data fetching, subskrypcje
5. Podsumowanie
6. Bibliografia

useEffect to brama do zewnętrznego świata!

Poświęć dużo miejsca na przykłady kodu — szczególnie AbortController i cleanup. To właśnie te fragmenty pokazują zrozumienie, a nie tylko zapamiętanie API.