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

Чтобы избежать лишних ререндеров компонента в React, можно использовать несколько подходов:

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

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

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

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

3. Оптимизация пропсов - избегайте передачи новых объектов/функций в пропсах на каждом рендере.

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

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

5. Разделение состояния - выносите часто изменяющиеся части в отдельные компоненты.

Важно помнить, что преждевременная оптимизация может усложнить код - сначала измеряйте производительность с помощью React DevTools.