React, React Hooks, Diffrent console.log print order inside useEffect

Question

I am getting two diffrent orders of console.log prints based on wheater i am using a promise or not.

The state:

let [data,setData] = useState(1);

When using promise:

let asyncFunk = async () => {
      return "Asd";
    };

    useEffect(() => {
        asyncFunk().then((result) => {
            console.log("BEFOR SET DATA " +data);
            setData(prev => prev +1 );
            console.log("AFTER SET DATA " +data);
        });
    },[]);

    return (
       <div>
            {console.log("Data in return " + data)}
        </div>
    );
}

The console.log print order is:

Data in return 1
BEFOR SET DATA 1
Data in return 2
AFTER SET DATA 1

So when the setData() is hit, the component re-renders, and the console.log from the return gets called BEFORE the console.log after the setData().

When i remove the async function:

 useEffect(() => {
            console.log("BEFOR SET DATA " +data);
            setData(prev => prev +1 );
            console.log("AFTER SET DATA " +data);
    },[]);
    return (
        <div>
            {console.log("Data in return " + data)}
        </div>
    );
}

The console.log print order is:

Data in return 1
BEFOR SET DATA 1
AFTER SET DATA 1
Data in return 2

When the async function is removed, the useEffect finishes first, and also prints the old state value as well, then the console.log from the return gets printed.

Any idea whats going on here and why this is the order the prints are happening?

Just a small tip, you could have called `console.log` before the `return`. No need for calling it inside the return. — Vencovsky, Oct 24 '19 at 17:42
Hopefully someone can explain it better than I did in your last question [here](https://stackoverflow.com/questions/58544214/react-hooks-re-renders), however this has to do with the javascript event loop lifecycle and call stack [Javascript event loop](https://flaviocopes.com/javascript-event-loop/) "There's a big difference between Promises (and Async/await, which is built on promises) and plain old asynchronous functions through setTimeout() or other platform APIs." — Willman.Codes, Oct 24 '19 at 17:45
Im kinda having trouble fitting in RE-RENDERS inside the javascript event loop — Emperor, Oct 24 '19 at 17:48
Possible duplicate of [Does React batch state update functions when using hooks?](https://stackoverflow.com/questions/53048495/does-react-batch-state-update-functions-when-using-hooks) — Vencovsky, Oct 24 '19 at 17:54

score 2 · Accepted Answer · answered Oct 24 '19 at 17:53

This is a implementation of React.

Please take a look at this answer where it says.

TL;DR – if the state changes are triggered asynchronously (e.g. wrapped in a promise), they will not be batched; if they are triggered directly, they will be batched.

And if you take a look at the comment of Dan Abramov it says

In current release, they will be batched together if you are inside a React event handler.
...
With current version, several setStates outside of event handlers (e.g. in network responses) will not be batched. So you would get two re-renders in that case.
...

So what is happening where is an expected result.

React, React Hooks, Diffrent console.log print order inside useEffect

1 Answers1