Оптимизация производительности React: Beyond the Basics

#react#performance#frontend#optimization

TL;DR

Разбираем продвинутые техники оптимизации React-приложений: от анализа bundle-файлов до кастомных решений для сложных кейсов. Никаких базовых советов про React.memo - только хардкор для опытных разработчиков.

Введение: Когда стандартных решений недостаточно

После 5 лет работы с React понимаешь, что стандартные оптимизации вроде useMemo и useCallback - это лишь верхушка айсберга. В продакшене крупных приложений мы сталкиваемся с проблемами, которые требуют глубокого понимания внутренней механики React и браузерного рендеринга.

Основная часть: Advanced оптимизации

1. Bundle Analysis и Code Splitting 2.0

// webpack.config.js
module.exports = {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/](react|react-dom|lodash-es)[\\/]/,
        name: 'vendor',
        chunks: 'all',
      },
    },
  },
};

Не ограничивайтесь стандартным React.lazy. Используйте динамические импорты с прелоадингом:

const loadComponent = () => import('./HeavyComponent');

// Прелоад при hover или других user interactions
button.addEventListener('mouseenter', loadComponent);

2. Оптимизация Context API

Стандартный Context API - это performance killer для часто изменяющихся данных. Решение - селективный рендеринг:

const OptimizedContext = React.createContext();

const useOptimizedContext = (selector) => {
  const context = React.useContext(OptimizedContext);
  const [selected, setSelected] = React.useState(() => selector(context));
  
  React.useEffect(() => {
    const unsubscribe = context.subscribe((newValue) => {
      const newSelected = selector(newValue);
      if (!Object.is(selected, newSelected)) {
        setSelected(newSelected);
      }
    });
    return unsubscribe;
  }, [context, selector]);

  return selected;
};

3. Virtualization на стероидах

Для сложных grid-ов стандартные библиотеки virtualization не подходят. Кастомное решение:

const useVirtualGrid = ({ rows, cols, itemSize, overscan = 2 }) => {
  const [viewport, setViewport] = React.useState({ width: 0, height: 0 });
  const scrollRef = React.useRef();
  
  const gridRef = React.useCallback((node) => {
    if (node) {
      const updateViewport = () => {
        const { clientWidth, clientHeight, scrollTop, scrollLeft } = node;
        setViewport({
          width: clientWidth,
          height: clientHeight,
          scrollTop,
          scrollLeft,
        });
      };
      
      updateViewport();
      node.addEventListener('scroll', updateViewport, { passive: true });
      return () => node.removeEventListener('scroll', updateViewport);
    }
  }, []);

  // Расчет видимых индексов с учетом overscan
  const visibleIndices = React.useMemo(() => {
    // ... сложная логика расчета
  }, [viewport, rows, cols, itemSize, overscan]);

  return { gridRef, visibleIndices, scrollRef };
};

Практическое применение: Case Study

В одном из проектов мы столкнулись с проблемой: dashboard с 500+ динамическими компонентами. Стандартные оптимизации не дали результата. Решение включало:

  1. Кастомный scheduler для батчинга state updates
  2. Priority-based rendering (критичные компоненты рендерятся первыми)
  3. Web Workers для тяжелых вычислений

Результат: 70% улучшение FPS и 50% снижение времени первого рендера.

Заключение

Оптимизация React-приложений на высоком уровне требует глубокого понимания не только React, но и браузерных API, архитектурных паттернов и иногда - готовности отказаться от стандартных решений в пользу кастомных реализаций. Главное правило: measure first, optimize second. Без профилирования любая оптимизация - это стрельба из пушки по воробьям.

Источник: https://www.hollandtech.net/claude-is-not-your-architect/