const MyComponent = () => { const history = useHistory(); let [val, setVal] = useState(0); useEffect(() => { trackPageView(); history.listen(trackPageView); }, []); function trackPageView() { console.log('hello: ' + val); setVal(val + 1); } }

useEffect se ejecuta una vez y registra trackPageView con history.listen . A medida que cambia el historial, se llama a trackPageView como se esperaba, pero val siempre tiene el mismo valor inicial de '0'. (El código anterior se basa en el código de este artículo ).

Por el contrario, este código hace algo similar...

 var a = 1; function g(f) { return () => f(); } let func = g(() => console.log('a: ' + a)); func(); a = 2; func();

... pero el a cambiante de a se refleja en la salida. https://jsfiddle.net/s3e250da/

Entonces, ¿qué explica la diferencia en el comportamiento?