functions.js

// Doesn't work
function Component(props: Props) {
  [foo, setFoo] = useState<number>(0);

  function useFoo() {
    // Foo is always 0
    console.log(foo);
  }

  return <>
    <p>{foo}</p>
    <button onClick={() => setFoo(foo + 1)}>Increment foo</button>
    <button onClick={useFoo}>Use foo</button>
  </>;
}

// Works
function Component(props: Props) {
  // Gross, I have to update both the ref and the state
  [foo, setFoo] = useState<number>(0);
  fooRef = useRef<number>(0);

  function useFoo() {
    console.log(foo.current);
  }

  return <>
    <p>{foo}</p>
    <button onClick={() => { setFoo(foo + 1); fooRef.current = foo + 1 }>Increment foo</button>
    <button onClick={useFoo}>Use foo</button>
  </>;
}