react-effects
Naucz się kiedy (i kiedy nie) używać useEffect w komponentach React
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Praktyczny poradnik do useEffect w React. Dowiedz się, kiedy efekt jest rzeczywiście potrzebny, a kiedy lepiej obliczyć wartość podczas renderowania lub przenieść logikę do handlera zdarzenia. Zawiera drzewo decyzyjne, przykłady anti-patternów i rekomendacje dla synchronizacji z systemami zewnętrznymi.
Jak używać
Zapoznaj się z drzewem decyzyjnym przed dodaniem useEffect do komponentu. Zadaj sobie cztery pytania: czy mogę obliczyć to podczas renderowania, czy resetuję stan na zmianę prop, czy to jest wyzwalane zdarzeniem użytkownika, czy synchronizuję z systemem zewnętrznym.
Jeśli odpowiedź na pierwsze pytanie to tak, oblicz wartość bezpośrednio w ciele komponentu zamiast przechowywać ją w stanie i synchronizować efektem.
Dla logiki wyzwalanej zdarzeniami użytkownika przenieś kod do handlera zdarzenia zamiast umieszczać go w useEffect zależnym od stanu.
Gdy musisz zresetować stan komponentu po zmianie prop, użyj atrybutu key zamiast efektu — to zmusi React do ponownego zamontowania komponentu.
W przypadku synchronizacji z zewnętrznymi magazynami danych (API przeglądarki, globalne event listenery) useEffect jest uzasadniony, ale rozważ useSyncExternalStore dla subskrypcji do zewnętrznych store'ów.
Przejrzyj listę anti-patternów w dokumentacji, aby zidentyfikować i naprawić częste błędy w swoim kodzie — każdy przykład pokazuje zarówno nieprawidłowe podejście z useEffect, jak i zalecaną alternatywę.