Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Client-side React performance optimization patterns.
How to use
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.