El siguiente código escucha cualquier clic y actualizaciones y muestra un contador. El contador se almacena en una variable de estado. La aplicación escucha los clics y llama a la función de incremento, que actualiza el contador.

lo que no entiendo es que

 set_counter(counter + 1)

No funciona. Actualiza el contador a 1 y luego se detiene. Sin embargo

 set_counter(counter += 1)

que primero asigna al contador directamente y luego llama al colocador (que es un patrón que estoy tratando de evitar), funciona como se esperaba.

¿Porqué es eso? ¿React no conserva las variables del entorno léxico donde se definen las funciones, a menos que se las asigne?

 import React, {useEffect, useState} from 'react'; const Logs = () => { let [counter, set_counter] = useState(0); // Runs on every click const increment = () => { set_counter(counter += 1); }; // Runs on first render useEffect(() => { window.addEventListener('click', increment, true); return () => window.removeEventListener('click', increment); }, []); return <div>{counter}</div>; }; export default Logs;