react-best-practices
29 reguł optymalizacji wydajności React – od podziału kodu po memoizację
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Zbiór 29 sprawdzonych wzorców optymalizacji wydajności aplikacji React. Reguły podzielone na kategorie: optymalizacja bundla, zapobieganie niepotrzebnym re-rendrom, renderowanie i obsługa operacji asynchronicznych. Każda reguła zawiera konkretny punkt kluczowy – od importowania z plików źródłowych zamiast barrel imports, przez React.lazy i Suspense, aż po useTransition i CSS content-visibility. Skill aktywuje się automatycznie przy zadaniach związanych z wydajnością, problemami z re-renderowaniem, rozmiarem bundla lub wzorcami useEffect i useMemo.
Jak używać
Zainstaluj skill react-best-practices w swoim środowisku Claude/Codex/Copilot. Skill automatycznie aktywuje się, gdy pracujesz nad optymalizacją wydajności aplikacji React.
Kiedy napotkasz problem z wydajnością – na przykład zbyt częste re-rendrowanie komponentu, zbyt duży rozmiar bundla lub nieefektywne użycie hooków – opisz zadanie asystentowi. Skill rozpozna kontekst i zasugeruje odpowiednie reguły.
Przejrzyj reguły z kategorii Bundle Optimization (CRITICAL), jeśli chcesz zmniejszyć rozmiar kodu. Zwróć uwagę na importowanie z plików źródłowych zamiast barrel index.ts, stosowanie React.lazy z Suspense dla ciężkich komponentów i preloadowanie zasobów krytycznych.
Jeśli problem dotyczy re-renderowania, skonsultuj się z regułami z kategorii Re-render Prevention (HIGH). Zastosuj memoizację dla drogich obliczeń, minimalizuj tablice zależności hooków, obliczaj wartości podczas renderowania zamiast w efektach, oraz używaj useTransition dla aktualizacji nienagliących.
W przypadku problemów z samym renderowaniem (kategoria Rendering, MEDIUM) wykorzystaj warunkowe renderowanie z operatorami logicznymi, przenieś statyczny JSX poza komponenty, zastosuj CSS content-visibility dla elementów poza ekranem lub owijaj animowane SVG-i, aby izolować re-rendrowanie.
Dla operacji asynchronicznych skorzystaj z reguł kategorii Async – stosuj Suspense boundaries, obsługuj błędy poprawnie i zarządzaj stanem ładowania w zgodzie z architekturą React 18.