Let's say you instead did the `setFoo` and `setBar` in a click handler. In that case, when you click the button it would tell React "Hey, in the next render set `foo = 10` and `bar = 2` (since `foo = 1)`. Then React goes ahead and runs your function again, and `foo` and `bar` will both be updated.

The value of `foo` does not change within a render cycle, you literally don't have to worry about state.

It might seem that there’s a chance that people will be confused about what bar is, but in practice all the changes are happening in handlers and bar will be a const anyway so you have no plans to mutate it directly.

    const [state, setState] = useState(0)
    const func = () => {
      console.log(state) // 0
      setState(40)
      console.log(state) // 0
    }