react-component-performance

Umiejętność analizy i optymalizacji problemów wydajności w komponentach React. Pomoże Ci znaleźć wąskie gardła renderowania, zmniejszyć zbędne re-rendera i przyspieszyć aktualizacje interfejsu. Pracuje z React DevTools Profiler, aby zidentyfikować komponenty renderujące się dłużej niż 16 ms, i prowadzi Cię przez systematyczną optymalizację — od izolacji zmiennego stanu, przez memoizację, aż po wirtualizację list. Idealna gdy komponenty reagują powoli na interakcje użytkownika.

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.