Podstawy useEffect: zależności i sprzątanie
Proszę uruchamiać efekty uboczne po renderowaniu, kontrolować ich ponowne uruchamianie tablicą zależności oraz zwracać funkcję sprzątającą, aby uniknąć wycieków pamięci.
Podstawy useEffect: zależności i sprzątanie to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co to jest useEffect?
useEffect uruchamia efekt uboczny po wyrenderowaniu komponentu przez React. Efekty uboczne obejmują pobieranie danych, subskrybowanie zdarzeń, konfigurowanie liczników czasu i komunikację z zewnętrznymi interfejsami API. Efekty uruchamiają się po wyświetleniu obrazu, a nie podczas renderowania.
Podstawowa składnia
useEffect(effect, deps?). Funkcja efektu jest domyślnie uruchamiana po każdym renderowaniu. Podaj tablicę zależności, aby określić, kiedy ma się uruchamiać.
import { useEffect } from 'react';
function Component() {
useEffect(() => {
console.log('Ran after every render');
});
}Tablica zależności kontroluje uruchamianie efektu
Pusta tablica []: uruchom raz po zamontowaniu komponentu. Niepusta tablica [a, b]: uruchom, gdy zmieni się a lub b. Brak tablicy: uruchamiaj po każdym renderowaniu (zwykle nie tego potrzebujesz).
// Run once on mount:
useEffect(() => {
fetchInitialData();
}, []);
// Run when userId changes:
useEffect(() => {
fetchUser(userId);
}, [userId]);
// Run after every render (usually a bug):
useEffect(() => {
trackPageView();
});Funkcja czyszcząca
Zwróć funkcję z useEffect, aby wykonać czyszczenie: usunąć odbiorniki zdarzeń, anulować subskrypcje i wyczyścić liczniki czasu. Funkcja czyszcząca uruchamia się przed następnym efektem oraz podczas odmontowywania komponentu.
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
// Cleanup: remove listener when effect re-runs or component unmounts
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);Nieaktualne domknięcia w zależnościach
Efekty przechwytują wartości, do których się odwołują, w chwili ich utworzenia. Jeśli odczytasz wartość stanu lub propsów wewnątrz efektu, ale nie umieścisz jej w zależnościach, zobaczysz nieaktualną wartość. Reguła exhaustive-deps ESLint wykrywa ten problem.
Reguła exhaustive-deps ESLint
Reguła ESLint react-hooks/exhaustive-deps ostrzega o brakujących zależnościach efektu. Niemal zawsze należy zastosować się do jej sugestii — nieaktualne zależności powodują błędy.
useEffect a useLayoutEffect
useEffect uruchamia się po wyświetleniu obrazu przez przeglądarkę. useLayoutEffect uruchamia się synchronicznie po modyfikacjach DOM, przed wyświetleniem obrazu. Używaj useLayoutEffect do odczytywania wymiarów DOM, aby uniknąć migotania interfejsu.
Wiele efektów
Używaj wielu wywołań useEffect, aby rozdzielać niezwiązane ze sobą zadania. Każdy efekt może mieć własną tablicę zależności i logikę czyszczenia.
// Separate effects for separate concerns:
useEffect(() => { document.title = `${count} items`; }, [count]);
useEffect(() => {
const sub = wsClient.subscribe(onMessage);
return () => sub.unsubscribe();
}, []);Warunki wyścigu — flaga ignorowania
Gdy efekt pobiera dane na podstawie propsów, wcześniejsze żądania mogą zakończyć się po późniejszych. Użyj flagi czyszczenia, aby ignorować nieaktualne odpowiedzi.
useEffect(() => {
let ignore = false;
async function load() {
const data = await fetchUser(userId);
if (!ignore) setUser(data); // only update if not cleaned up
}
load();
return () => { ignore = true; };
}, [userId]);Podwójne uruchamianie efektu w Strict Mode
Strict Mode w React 18 montuje, odmontowuje i ponownie montuje komponenty w środowisku deweloperskim, aby ujawnić błędy w czyszczeniu. Efekty uruchomią się dwukrotnie — jest to zamierzone i pomaga wykrywać brakujące czyszczenie.
Kiedy nie używać useEffect
Nie używaj useEffect do: 1) wyprowadzania stanu z propsów (obliczaj go podczas renderowania), 2) resetowania stanu po zmianie propsów (użyj właściwości key), 3) bezwarunkowego aktualizowania stanu (powoduje to pętle). W razie wątpliwości zapytaj: czy ten kod reaguje na zdarzenie użytkownika lub system zewnętrzny?
Szybkie sprawdzenie
Kiedy uruchamia się funkcja czyszcząca useEffect?
Podsumowanie: useEffect
Efekty uboczne uruchamiają się po renderowaniu. Pusta tablica zależności = raz podczas montowania. Tablica zależności = po określonych zmianach. Zwracaj funkcję czyszczącą, aby zapobiegać wyciekom. Używaj wielu efektów do rozdzielania niezależnych zadań. Flaga ignorowania zapobiega przetwarzaniu nieaktualnych odpowiedzi z pobierania. Strict Mode uruchamia efekty dwukrotnie, aby testować czyszczenie. Nie używaj useEffect dla wartości pochodnych ani stanu, który możesz obliczyć podczas renderowania.
Często zadawane pytania
Czy lekcja „Podstawy useEffect: zależności i sprzątanie” jest bezpłatna?
Tak — pełny tekst „Podstawy useEffect: zależności i sprzątanie” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Podstawy useEffect: zależności i sprzątanie”?
Proszę uruchamiać efekty uboczne po renderowaniu, kontrolować ich ponowne uruchamianie tablicą zależności oraz zwracać funkcję sprzątającą, aby uniknąć wycieków pamięci. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Podstawy useEffect: zależności i sprzątanie”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Podstawy useEffect: zależności i sprzątanie
- Pobieranie danych przy montowaniu
- Obsługa stanów ładowania i błędów
- AbortController do sprzątania