Me preguntaba cómo es que useCallback no puede obtener el valor de estado más reciente del componente. El estado del componente no está presente en el ámbito externo.
const [x, updateX] = useState(2); const handleChange = useCallback(() => { console.log(x); // To pick up latest value of x in here, I need to add x in dependency array? // Why is that this inner arrow function cannot pick x from its outer scope? }, [])Editar: el valor más reciente de useRef es recogido por handleChange ... sin necesidad de la referencia en la matriz de dependencia. Sin embargo, necesitamos el valor del estado en dependencyArray. ¿Porqué es eso?
Supongo que tiene que haber algún alcance local entre la creación debajo del capó, ¿de dónde se toma el valor de x? No estoy seguro si estoy en lo correcto.
Además, la pregunta de seguimiento es ¿cómo escribir algo como useCallback (memoización de funciones)? usando vainilla js?
Sí, debe pasar X en la matriz de dependencia. La devolución de llamada solo se cambia cuando cambia la dependencia. En este ejemplo, puede contar y registrar el estado actual de x.
function Tester(props: TesterProps): JSX.Element { const [x, setX] = useState(0); const handleChange = useCallback(() => { console.log(x); }, [x]); return ( <> <button onClick={() => setX(x + 1)}>Change State</button> <button onClick={() => handleChange()}>Handle Change</button> </> ); }Haz esto:
const handleChange = useCallback(() => { console.log(x); }, [x]);O esto:
const handleChange = () => { console.log(x); };Ambos imprimirán el valor X real. El segundo no memoriza la función, por lo que se volverá a declarar en cada render.