Какие типичные проблемы в React-компонентах приводят к ухудшению производительности?

Производительность React в первую очередь страдает не от самого Virtual DOM, а от того, как часто и насколько широко происходят ре-рендеры. React по умолчанию перерисовывает компонент и всё его поддерево при изменении состояния или пропсов родителя, даже если данные ребёнка не поменялись. Если это происходит на верхнем уровне большого дерева, страдает вся страница.

Основные источники проблем

• Лишние ре-рендеры из-за нестабильных пропсов: инлайн-функции, объекты и массивы, создаваемые при каждом рендере.
• Тяжёлые синхронные вычисления прямо в теле компонента (сортировки, фильтрации, парсинг).
• Большие списки без ключей или с индексом в качестве key, что ломает reconciliation.
• Обновление глобального состояния (Context, Redux) слишком высоко в дереве.
• Отсутствие мемоизации там, где она реально нужна.

Пример: как ломается мемоизация

function Parent() {
  const [count, setCount] = useState(0);
  // новый объект на каждом рендере — memo бесполезен
  const config = { theme: 'dark' };
  return <Child config={config} onClick={() => setCount(count + 1)} />;
}

const Child = React.memo(function Child({ config, onClick }) {
  console.log('render Child');
  return <button onClick={onClick}>{config.theme}</button>;
});

Здесь React.memo не спасёт: объект config и функция onClick создаются заново при каждом рендере, поэтому ссылки меняются и Child перерисовывается. Исправляется через useMemo и useCallback.

Как исправлять

1. Мемоизировать значения и коллбэки: useMemo, useCallback, React.memo.
2. Выносить тяжёлые вычисления из рендера или кэшировать их.
3. Использовать стабильные ключи в списках (id, а не index).
4. Опускать состояние как можно ниже в дерево, чтобы ре-рендер был локальным.
5. Разделять контексты и применять селекторы в Redux/Zustand.

Итог: оптимизацию стоит применять там, где профилирование (React DevTools Profiler) показывает реальные лишние ре-рендеры или тяжёлые вычисления, а не повсеместно — преждевременная мемоизация усложняет код без выгоды.