Why does React useState hook trigger a re-render before remaining code executed?

Question

I am trying to figure out when the re-render occurs when updating state in React with useState hook. In the code below, clicking the button triggers the handleClick function which contains a setTimeout. The callback inside setTimeout is executed after 1 second, which updates the state variable count by calling setCount. A console log then prints a message.

The order I would expect the console logs to show up once the button is clicked are:

1. 'Count before update', 0
2. 'Count post update in setTimeout', 0
3. 'Count in render', 1

However the order I see after running this code is:

1. 'Count before update', 0
2. 'Count in render', 1
3. 'Count post update in setTimeout', 0

How is it that "'Count in render', 1" shows up before "'Count post update in setTimeout', 0"? Doesn't setCount result in the scheduling of a re-render that is not immediate? Shouldn't the console log immediately after the setCount function call always execute before the re-render is triggered?

function AppFunctional() {
  const [count, setCount] = React.useState(0);
  const handleClick = () => {
    console.log('Count before update', count);
    setTimeout(() => {
      setCount(count + 1);
      console.log('Count post update in setTimeout', count);
    }, 1000);
  };
  console.log('Count in render', count);
  return (
    <div className="container">
      <h1>Hello Functional Component!</h1>
      <p>Press button to see the magic :)</p>
      <button onClick={handleClick}>Increment</button>
      {!!count && (
        <div className="message">You pressed button {count} times</div>
      )}
    </div>
  );
}

ReactDOM.render(<AppFunctional />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

Answer 1

Doesn't setCount result in the scheduling of a re-render that is not immediate? Shouldn't the console log immediately after the setCount function call always execute before the re-render is triggered?

Under the hood, React optimizes re-renders by queuing and batching them when it can determine that it's safe to do so. When in a function React understands (such as a functional component, or a hook callback), if you call a state setter in one of those functions, React will know that it's safe to delay the state update until its processing is finished - for example, until all effect / memo / etc callbacks have run, and until all components from the original state have been painted onto the screen.

But when you call a state update outside of a built-in React function, React doesn't know enough about its behavior to know when it'll be able to re-render next if it delays the state update. The setTimeout call is not called from inside the React lifecycle, so batching updates and optimizing them is much more difficult - so, rather than React trying to guess how it could be done safely and asynchronously, it re-renders immediately.