Как оптимизировать перерендер компонентов

Оптимизация перерендеров в React достигается несколькими способами:

1. React.memo – для мемоизации функциональных компонентов:

const MyComponent = React.memo(function MyComponent(props) {
  /* рендер с использованием props */
});

2. useMemo/useCallback – для мемоизации значений и функций:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => { doSomething(a, b) }, [a, b]);

3. shouldComponentUpdate (для классовых компонентов):

shouldComponentUpdate(nextProps, nextState) {
  return this.props.value !== nextProps.value;
}

4. Разделение состояния – выносить состояние в ближайший общий родитель или использовать контекст/сторонние решения (Redux, MobX)

5. Ключи в списках – всегда использовать стабильные уникальные key

6. React DevTools Profiler – для анализа ненужных рендеров

Оптимизируйте только там, где это действительно нужно – лишние мемоизации могут ухудшить производительность.