Middle
import { useState, useCallback } from 'react' const Komponentas = () => { const [skaitiklis, setSkaitiklis] = useState(0); const handleClick = useCallback(() => { console.log(skaitiklis); }, []); return ( <div> <div onClick={() => setSkaitiklis((prev) => prev + 1)}>Skaitiklis: {skaitiklis}</div> <div onClick={handleClick}>Registruoti</div> </div> ); };
sobes.tech AI
Atsakymas iš AI
В данном примере handleClick создан с помощью useCallback с пустым массивом зависимостей []. Это значит, что функция будет создана один раз при монтировании компонента и не будет обновляться при изменении count.
Из-за этого при клике на кнопку "Log" в консоль всегда будет выводиться значение count, которое было при первом рендере (в данном случае 0), а не актуальное текущее значение.
Чтобы функция всегда имела актуальное значение count, нужно добавить count в массив зависимостей:
const handleClick = useCallback(() => {
console.log(count);
}, [count]);
Или использовать функцию обновления состояния с коллбеком, если нужно избежать лишних пересозданий функции.
Таким образом, важно правильно указывать зависимости в useCallback, чтобы избежать замыкания на устаревшие значения.