React може бути швидким
React — потужний інструмент, але без належної оптимізації додатки можуть ставати повільними. У цій статті ми розберемо найефективніші техніки оптимізації, які ми застосовуємо у Franya.
React.memo: коли компонент не повинен перерендеруватись
За замовчуванням React перерендерує всі дочірні компоненти при зміні стану батька. React.memo — це HOC, який запам'ятовує результат рендеру та пропускає перерендер, якщо пропси не змінилися.
useMemo та useCallback
useMemo кешує обчислене значення між рендерами, а useCallback — посилання на функцію. Це критично, коли ви передаєте об'єкти або функції як пропси в мемоізовані компоненти.
Code Splitting
Один із найефективніших способів прискорити початкове завантаження — розбити бандл на частини та завантажувати їх за потребою через React.lazy та Suspense. У наших проєктах code splitting зменшив початковий бандл на 40-60%.
Віртуалізація довгих списків
Бібліотеки типу react-window або react-virtuoso рендерять тільки видимі елементи, створюючи ілюзію повного списку.
Оптимізація зображень
Використовуйте WebP/AVIF формати, lazy loading, responsive images та CDN. Перехід з JPEG на WebP зменшує розмір на 25-35%, а AVIF — на 40-50%.
Висновок
Оптимізація React — це не одна магічна кнопка, а комплекс заходів. Почніть з профілювання через React DevTools та застосовуйте відповідні техніки.