writing-react-effects
Pisz komponenty React bez zbędnych useEffect — synchronizuj tylko z systemami zewnętrznymi
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Umiejętność, która uczy Cię pisać czystsze komponenty React, eliminując zbędne efekty uboczne. Zamiast przechowywać wartości pochodne w stanie i aktualizować je w useEffect, obliczasz je bezpośrednio podczas renderowania. Idealna do tworzenia nowych komponentów, refaktoryzacji istniejącego kodu lub przeglądu logiki efektów. Unikasz duplikacji stanu, niepotrzebnych re-renderów i dryfu danych — komponenty stają się prostsze i bardziej przewidywalne.
Jak używać
Zainstaluj umiejętność w swoim środowisku Dust, dodając ścieżkę do repozytorium dust-tt/dust w sekcji skills.
Gdy tworzysz lub przeglądasz komponent React, aktywuj tę umiejętność, jeśli widzisz useEffect, który oblicza wartość pochodną (np. fullName z firstName i lastName) lub reaguje na zmiany propsów poprzez aktualizację stanu.
Umiejętność przypomni Ci zasadę: efekty są "wyjściem awaryjnym" tylko dla synchronizacji z systemami zewnętrznymi (API, DOM, widżety trzecie). Jeśli nie synchronizujesz z czymś poza komponentem, nie potrzebujesz useEffect.
Zastosuj wzorzec — zamiast tworzyć state i effect do transformacji danych, oblicz wartość bezpośrednio w ciele funkcji komponentu podczas renderowania (np. const fullName = firstName + ' ' + lastName).
Przejrzyj swój kod pod kątem useEffect, które ustawiają stan w odpowiedzi na zmiany propsów — zastąp je wartościami pochodnymi lub resetami kluczowymi (key prop).
Weryfikuj, czy każdy pozostały useEffect rzeczywiście synchronizuje komponent z systemem zewnętrznym; jeśli nie, usuń go i oblicz wartość podczas renderowania.