Bug: React's batching makes state comparison checks unreliable

It seems that in some situations React’s batching makes comparison to change in state unreliable. In the provided example, focus/blur handlers produce different outcomes:

• when triggered via tabbing
• vs. when manually focusing on keydown

React version: 17.0.0

Steps To Reproduce

1. Open the provided codesandbox
2. Focus the 2 inputs back and forth by tabbing
3. Note the onChange logs correspond to the updates and are in sync with the UI
4. Now instead, focus an input then press the down arrow to programmatically focus back and forth between the 2 inputs
5. Note the onChange logs are now wrong and inconsistent with the UI (initially true and then false forever)

Link to code example: https://codesandbox.io/s/react-staleness-ishfn?file=/src/App.js

The current behavior

When tabbing through this is the output I get:

onChange true onChange false onChange true onChange false onChange true onChange false

When pressing arrow down to focus the inputs back and forth I get:

onChange true onChange false onChange false onChange false onChange false onChange false

Note that if you check the “Prevent React from batching updates?” checkbox, both examples behave the same. The only difference is that in this case, we wrap the .focus() calls in a setTimeout() to avoid batching.

The expected behavior

We would expect the 2 examples to behave the same.

[jjenzz]

ReactDOM.flushSync! TIL 😮

If this is just a workaround, are we saying that it is something that will be fixed?

I’m not sure how we’ll explain to our consumers that they need to do that 😅 Do we know when this predictably occurs and when this kind of fix is needed so we can maybe document it?

Thanks for the help @eps1lon

[eps1lon]

The workaround for this particular issue is similar to https://github.com/facebook/react/issues/18591:

React.useLayoutEffect(() => {
  ref.current = value;
});
....
<div onBlur={() => {
  ReactDOM.flushSync(() => {
    setValue(false)
  })
}}>

– https://codesandbox.io/s/flushsync-semantics-eli4w?file=/src/App.js:1520-1580

Though it makes me wonder whether https://github.com/facebook/react/issues/18591 is not just related to concurrent mode. Intuitively I would not expect https://codesandbox.io/s/crimson-lake-gidmx?file=/src/App.js to work the way it does right now.