Проблема
- Строка `onClick={() => setC(c+1)}` создаёт новую функцию при каждом рендере Parent. Даже если Child обёрнут в `React.memo`, сравнение пропсов — поверхностное (по ссылке), и новая функция — это другое значение, поэтому Child будет ререндериться лишний раз.
- Корень: функция — не примитив, её identity меняется при каждом рендере родителя.
Почему это важно (коротко)
- При изменении `c` (например $c=0$ → увеличиваем на $1$) Parent ререндерится; при каждом рендере создаётся новая callback-функция → Child получает «новый» проп → ререндер Child.
Варианты оптимизации (с примерами)
1) Мемозировать обработчик через useCallback + функциональное обновление:
- Почему: можно сделать callback стабильным по ссылке и не зависеть от текущего `c`.
- Пример:
const handleClick = useCallback(() => {
setC(prev => prev + 1);
}, []);
return ;
Здесь инкремент делаем как функциональное обновление `prev => prev + 1`, поэтому useCallback не зависит от `c` и остаётся стабильным.
2) Мемонизация Child:
- Обернуть Child в `React.memo(Child)` (или реализовать shouldComponentUpdate/ PureComponent в классе). Это полезно вместе с пунктом (1), но само по себе не поможет, если проп-функция постоянно меняется.
3) Передавать стабильную функцию/диспетчер:
- React гарантирует стабильность identity сеттеров setState, поэтому можно передавать `setC` как диспетчер и вызывать его в дочернем с функциональным обновлением:
// в Child: props.onIncrement(prev => prev + 1)
- Или использовать useReducer — dispatch тоже стабилен по ссылке.
4) Хранить callback в ref (редкий кейс):
- Если нужно совсем избежать пересоздания и не хотите useCallback, можно положить функцию в ref и вызывать `ref.current()`. Обычно сложнее и менее читаемо.
5) Не оптимизировать преждевременно:
- Если Child дешёвый или Parent часто меняет другие пропсы, оптимизация бессмысленна. Измеряйте (Profiler) перед оптимизацией.
Короткая рекомендация
- Для вашего примера чаще всего достаточно: обернуть Child в `React.memo` и в Parent использовать
const handleClick = useCallback(() => setC(prev => prev + 1), []);
return ;
Тогда Child не будет ререндериться из‑за новой функции при каждом рендере Parent.
(Замечание про числа: инкремент — $+1$; начальное состояние в примере — $0$.)