Toolverse
All skills

react-effects

by coder

Guidelines for when to use (and avoid) useEffect in React components

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
coder
Category
Frontend
Views
1

About this skill

Guidelines for when to use (and avoid) useEffect in React components

How to use

  1. 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.

  2. Jeśli odpowiedź na pierwsze pytanie to tak, oblicz wartość bezpośrednio w ciele komponentu zamiast przechowywać ją w stanie i synchronizować efektem.

  3. Dla logiki wyzwalanej zdarzeniami użytkownika przenieś kod do handlera zdarzenia zamiast umieszczać go w useEffect zależnym od stanu.

  4. Gdy musisz zresetować stan komponentu po zmianie prop, użyj atrybutu key zamiast efektu — to zmusi React do ponownego zamontowania komponentu.

  5. 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.

  6. 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ę.

Related skills