react-perf

React and Next.js performance optimization patterns. Use when writing, reviewing, or optimizing React code for web apps, Remotion videos, or any React-based UI. Covers waterfall elimination, bundle optimization, re-render prevention, and server-side patterns.

1. Zainstaluj umiejętność w swoim środowisku agenta — dodaj react-perf do listy dostępnych skills w konfiguracji MCP.

2. Kiedy piszesz lub przeglądasz kod React, poproś agenta o analizę wydajności, wskazując konkretny fragment kodu lub plik. Agent zastosuje wzorce z umiejętności, aby zidentyfikować problemy.

3. Zwróć uwagę na cztery priorytety: najpierw usuń waterfalle (sekwencyjne await) zamieniając je na Promise.all dla niezależnych żądań, następnie zoptymalizuj bundle poprzez bezpośrednie importy zamiast barrel imports, potem zapobiegaj renderowaniom używając useRef zamiast useState gdzie to możliwe, wreszcie popraw wydajność JavaScript poprzez Map/Set zamiast pętli.

4. W aplikacjach Next.js wykorzystaj React.cache() do deduplikacji żądań w ramach jednego renderowania oraz minimalizuj dane przesyłane do klienta — agent pokaże, gdzie można przenieść logikę na serwer.

5. Dla komponentów Remotion zastosuj te same zasady: cachuj wyniki interpolate() jeśli są drogie, używaj useMemo dla ciężkich obliczeń, minimalizuj renderowanie elementów poza ekranem.

6. Poproś agenta o konkretne sugestie refaktoringu — będzie proponować zmiany kodu z wyjaśnieniami, dlaczego każda optymalizacja poprawia wydajność.