Bailouts for state updates behavior inconsistently for hooks

This is a bug I think.

As the title says, React didn’t help me to merge the update requests.

const Player = ({ }) => {
  const [name, setName] = useState('John Higgins',)
  const [age, setAge] = useState(47)
  const nextPlayer = () => {
    setName('Mark Selby')
    setAge(34)
  }
  console.log('render.')
  return <p>
    This player's name is {name}, {age} years.
    <button type="button" onClick={nextPlayer}>next</button>
  </p>
}

After the button clicked, it outputs:

>> render.
>> render.

But in fact, I got three.

>> render.
>> render.
>> render.

It doesn’t always be.

The actual code

const List = ({}) => {
	const [items, setItems] = useState<ListItem[]>([])
	const [tick, setTick] = useState(0)
	const [page, setPage] = useState(1)
        
        // # effect 001
	useEffect(() => {
           const refresh = tick > 1
           load({ refresh, page })
             .then(d => {
                if (refresh) setItems(d) // replace
                else setItems([...items, ...d]) // append
             })
        }, [tick, page])

        // # effect 002
        useEffect(() => {
            testingScrollToBottom(() => {
               setTick(0) // makes effect 001 applied.
               setPage(page + 1) // makes effect 001 applied again.
            })
            return () => {
                stopTestingScrollToBottom()
            }
        }, [page])
        
        return (
            <div>
                <button
                    onClick={() => {
                        setTick(tick + 1)
                        setPage(1)
                    }}>
                    Refresh
                </button>
                { items.map(item => <Item item={item}/>) }
            </div>
        )
}

Function testingScrollToBottom is where the things happened.

Here is what I did to avoid that:

By the way, testingScrollToBottom uses setTimeout.

[amitnovick]

Just suffered from this issue, and am glad to see it’s already been reported and has been discussed.

Minimal Reproduction

Wanted to offer a minimal reproduction for anyone coming here trying to understand the issue, with setTimeout calling setter functions returned by useState hook, and React not merging (batching) those updates:

function App() {
  const [first, setFirst] = React.useState();
  const [second, setSecond] = React.useState();
  const [third, setThird] = React.useState();

  console.log("render: first:", first, "second:", second, "third:", third);

  return (
    <button
      onClick={() => {
        setTimeout(() => {
          setFirst(1);
          setSecond(2);
          setThird(3);
        }, 1000);
      }}
    >
      Click me!
    </button>
  );
}

/* Console output on click: */
// render: first: 1 second: undefined third:  undefined
// render: first: 1 second: 2 third: undefined
// render: first: 1 second: 2 third:  3

Basically, clicking the button will trigger 3 renderings of the component (one for each setState function called from within setTimeout), each rendering with only a partial state update.

CodeSandbox: https://codesandbox.io/s/unexpected-renderings-with-incomplete-state-update-txhy7

[bvaughn]

React’s event batching does take things like this into consideration, but we wouldn’t want React to be in the business of overriding global/native APIs like setTimeout.

FWIW the upcoming concurrent mode will automatically batch nearby state updates, like in the case you shared, so this wouldn’t have been an issue either.