Как оптимизированы ререндеры в функциональных компонентах в React

React оптимизирует ререндеры функциональных компонентов с помощью React.memo, useMemo и useCallback.

React.memo — кеширует компонент, предотвращая ререндер, если пропсы не изменились:

const MemoizedComponent = React.memo(MyComponent);

useMemo — кеширует вычисления, пересчитывая только при изменении зависимостей:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useCallback — сохраняет ссылку на функцию, предотвращая лишние ререндеры дочерних компонентов:

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

Также React автоматически батчит обновления, группируя их для минимизации ререндеров.