The following code, listens for any click and updates and shows a counter. The counter is stored in a state variable. The app listens for clicks and calls the increment function, which updates the counter.

What I don't understand is that

set_counter(counter + 1)

does not work. It updates the counter to 1 and then stops. However

set_counter(counter += 1)

which first assigns to counter directly and then calls the setter (which is a pattern that I am trying to avoid), works as expected.

Why is that? Does React not preserve the variables of the lexical environment where the functions are defined, unless you assign to them?

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;