import { useState, useCallback } from 'react'

Условие

import { useState, useCallback } from 'react'

const Component = () => { const [count, setCount] = useState(0);

const handleClick = useCallback(() => { console.log(count); }, []);

return ( <div onClick={() => setCount((prev) => prev + 1)}>Count: {count}

  <div onClick={handleClick}>Log</div>
</div>

); };

Ответ

В данном примере handleClick создан с помощью useCallback с пустым массивом зависимостей []. Это значит, что функция будет создана один раз при монтировании компонента и не будет обновляться при изменении count.

Из-за этого при клике на кнопку "Log" в консоль всегда будет выводиться значение count, которое было при первом рендере (в этом случае 0), а не актуальное текущее значение.

Чтобы функция всегда имела актуальное значение count, нужно добавить count в массив зависимостей:

const handleClick = useCallback(() => {
  console.log(count);
}, [count]);

Или использовать функцию обновления состояния с коллбеком, если нужно избежать лишних пересозданий функции.

Таким образом, важно правильно указывать зависимости в useCallback, чтобы избежать замыкания на устаревшие значения.