Песочница:
https://codesandbox.io/s/quizzical-khayyam-55ggd
При монтировании корневого компонента я устанавливаю дваждый стейт через setTimeout:
useEffect(() => {
setTimeout(() => {
setState1((prevState) => ({
...prevState,
name: [...prevState.name, "2"]
}));
}, 3000);
setTimeout(() => {
setState1((prevState) => ({
...prevState,
status: false
}));
}, 5000);
}, []);
Я передаю state1.name в другой компонент - App2. Компонент App2 рендердерится три раза - тут всё ок, всё логично. Но я не хочу, чтобы компонент App2 рендерился заново при установке стейта state1.status. Окей, юзаем useCallback:
const getTablePaginationProps = useCallback(
() => ({
name: state1.name
}),
[state1.name]
);
И передаём:
<App2 {...getTablePaginationProps()} />
Но компонент по прежнему рендерится три раза, судя по console.log в дочернем компоненте. Почему? Ведь state1.name устанавливается только один раз, соответственно App2 должен отрендериться два раза. Что я делаю не так?
