import { useState, useCallback } from 'react' const Componente = () => { const [cuenta, setCuenta] = useState(0); const manejarClick = useCallback(() => { console.log(cuenta); }, []); return ( <div> <div onClick={() => setCuenta((prev) => prev + 1)}>Cuenta: {cuenta}</div> <div onClick={manejarClick}>Registrar</div> </div> ); };

En este ejemplo, handleClick se crea usando useCallback con un array de dependencias vacío []. Esto significa que la función se creará una sola vez al montar el componente y no se actualizará al cambiar count.

Por eso, al hacer clic en el botón "Log", en la consola siempre se mostrará el valor de count que había en la primera renderización (en este caso 0), y no el valor actual.

Para que la función siempre tenga el valor actualizado de count, hay que añadir count al array de dependencias:

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

O usar una función de actualización del estado con un callback, si se quiere evitar crear la función varias veces.

De esta forma, es importante indicar correctamente las dependencias en useCallback para evitar que se cierre en valores obsoletos.