Добрый день. Проверяю производительность с помощью профайлера, наткнулся на момент, что значения меняются при изменении порядка компонентов.
Как пример
Компонент 1function CounterFunc() {
const [count, setCount] = useState(0);
function dec() {
setCount((prevCount) => prevCount - 1);
}
function inc() {
setCount((prevCount) => prevCount + 1);
}
return (
<div>
<Button onClick={dec}>-</Button>
<div>{count}</div>
<Button onClick={inc}>+</Button>
</div>
);
}
Компонент 2function TimerFunctional() {
const [date, updateDate] = useState(new Date());
const intervalIdRef = useRef<NodeJS.Timeout>();
useEffect(() => {
const { current } = intervalIdRef;
if (!current) {
intervalIdRef.current = setInterval(() => {
updateDate(new Date());
}, 1000);
}
return () => {
if (current) {
clearInterval(current);
}
};
}, []);
return <div>{date.toLocaleTimeString()}</div>;
}
И рендер
function App() {
return (
<>
<TimerFunctional />
<CounterFunc />
</>
);
}
Результаты зависят от порядка TimerFunctional и CounterFunc
Что я упускаю?