react-component-performance

Analyze and optimize React component performance issues (slow renders, re-render thrash, laggy lists, expensive computations). Use when asked to profile or improve a React component, reduce re-renders, or speed up UI updates in React apps.

1. Opisz lub odtwórz spowolnienie w Twoim komponencie React — czy chodzi o powolne renderowanie, częste re-rendera czy laggy listy.
2. Otwórz React DevTools Profiler, nagrywaj interakcję i przeanalizuj Flamegraph — szukaj komponentów renderujących się dłużej niż ~16 ms, a następnie poproś umiejętność o analizę problemu.
3. Postępuj zgodnie z proponowanymi krokami: zidentyfikuj co wyzwala re-rendera (aktualizacje stanu, zmienne props, efekty), oddziel szybko zmieniający się stan od ciężkich poddrzew.
4. Zastosuj optymalizacje: stabilizuj props za pomocą useCallback/useMemo, owijaj komponenty liściowe w memo, przenieś liczniki animacji do komponentów potomnych, aby nie wyzwalały re-rendera całego drzewa.
5. Dla długich list rozważ wirtualizację lub windowing — unikaj renderowania ukrytych elementów. Upewnij się, że klucze są stabilne i nie oparte na indeksach.
6. Zweryfikuj dependency arrays w efektach i unikaj drogich obliczeń w render — prekomputuj wartości lub umieść je w memoizowanych helperach. Porównaj nowy profil z baseline'em sprzed optymalizacji.