Idiomatically access latest useState state from listen<T>()?

[starptr]

Currently, the following is a race bug:

function App() {
  // We will set the state from one listener and read it from another listener
  const [count, setCount] = useState(0);
  
  // Set up event listeners
  useEffect(() => {
    // Handle the "event" event
    const unlisten = listen("event", (event) => {
      setCount(event.payload);
    });
    
    // Handle the "event-2" event
    const unlisten2 = listen("event-2", (event) => {
      // !! This is a race bug; `count` here will NOT always be the latest value from the callback above
      foo(count);
    });

    return () => ...; // unlistening is omitted because it's not relevant here
  }, [])
}

If you emit the events in succession like this: event and then event-2, then the value of count in the second callback will not be the latest value as set by the first callback, because the second callback can run before App() is called again with the new state.

One possible solution is to use useRef instead and directly write/read from the ref. However, this isn't ideal if you need to render count, since automatic rerendering only happens with useState.

Another idea you is to use useRef in conjunction with useState, updating the ref value in a useEffect by depending on the state like so:

const [count, setCount] = useState(0);
const countRef = useRef(count);
useEffect(() => {
  countRef.current = count;
}, [count]);

But this is not a solution, because the useEffect callback happens even later in the rendering lifecycle.

So, what's an idiomatic way to go about this?