import { useState, useCallback } from 'react' const Componente = () => { const [contagem, setContagem] = useState(0); const handleClick = useCallback(() => { console.log(contagem); }, []); return ( <div> <div onClick={() => setContagem((prev) => prev + 1)}>Contagem: {contagem}</div> <div onClick={handleClick}>Registar</div> </div> ); };

Neste exemplo, handleClick é criado usando useCallback com um array de dependências vazio []. Isso significa que a função será criada uma única vez na montagem do componente e não será atualizada ao alterar count.

Por isso, ao clicar no botão "Log", o console sempre exibirá o valor de count que havia na primeira renderização (neste caso 0), e não o valor atual.

Para que a função sempre tenha o valor atualizado de count, é necessário adicionar count ao array de dependências:

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

Ou usar uma função de atualização do estado com um callback, se desejar evitar recriar a função desnecessariamente.

Assim, é importante indicar corretamente as dependências no useCallback para evitar capturar valores desatualizados.