Bug:

[wedothebest4you]

Please see a code underneath. The expected and actual results are given below. Please help to understand the reason for the differences.

React version: React 18

Steps To Reproduce

Please run the sample code below.

import { useEffect, useState } from 'react';

export default function App() {
  const [counter, setCounter] = useState(null);

  useEffect(() => {
    let i = 0;
    setTimeout(() => {
      setCounter((c) => {
        console.log(c, i);
        return i;
      });
      i = i + 1;
      setTimeout(() => {
        setCounter((c) => {
          console.log(c, i);
          return i;
        });
        i = i + 1;
        setTimeout(() => {
          setCounter((c) => {
            console.log(c, i);
            return i;
          });
          i = i + 1;
        }, 500);
      }, 500);
    }, 500);
  }, []);
  return <>{counter && counter}</>;
}

The current behavior

In browser :

// 0/2/3

In console :

/*
    null,0 
    0,2 
    2,3
*/

The expected behavior

In browser :

// 1/2/3 (each digit delayed by half of a second)

In console :

/*

  null,1 
  1,2
  2,3
 
*/