Where does the function continue after a re-render?

Question

When the state called loading is set to true and a re-render of the component is caused, where does the function continue? Does it run console.log(1) again, just that it's that fast that I can't track it? Or does it contiune with console.log(2)? Or is the re-render happening after console.log(2) while the asynchronous operation is running? The same question appears regarding the moment loading is set to false again. Will it re-render after console.log(3) and console.log(4) have run or between those as the order in the code would suppose?

If there was no async operation running between the state changes, would the Spinner even appear at some point?, or would the entire function run before it re-renders and therby the state true not even trigger a re-render, because the state changes get "bundled" which would mean that it would only re-render when the state is set to false again?

Sorry for the complicated formulation but I don't know any other way to express myself. I struggle with the idea that a re-render means that the entire functional component is re-run, because a function call could thereby be interrupted. I just don't undestand how and where it conitunes and if that is consistent, because it should be IMO.

´´´ export default function IndexComponent() {

const [loading, setLoading] = useState(false)

const doSomething = async () => {
    console.log(1)
    setLoading(true) //re-renders and Spinner appears
    console.log(2)
    await new Promise(resolve => setTimeout(resolve, 5000));
    console.log(3)
    setLoading(false)//re-renders and Spinner disappears
    console.log(4)
}


return (
    <div>
        <button onClick={doSomething}>Login</button>
        {loading && <div>Spinner</div>}
    </div>
)

} ´´´

State updates are asynchronous and batched. Each time you call `doSomething`, the entire function runs to completion. Any state updates *queued* in that logic are then processed and a re-render triggered. In this case no net change is made to state. It started as `false` and it ends as `false`. — David, Sep 30 '22 at 13:58
If this was true, why is the Spinner appearing while the asynchronous operation is running? That would be impossible. — JackFrost, Sep 30 '22 at 14:24
That's sort of an edge case here, because `doSomething` isn't awaited. There's still nothing *interrupting* the function. Each click of the button executes `doSomething` in its entirety. React doesn't have any magic happening in the background, invoking a function is still invoking a function just like any other JavaScript. — David, Sep 30 '22 at 14:28

score 3 · Accepted Answer · answered Sep 30 '22 at 14:35

You may be over-thinking this. There's no magic happening in React which in any way changes how JavaScript works. When a function is invoked, it executes. Nothing in React interrupts that function in any way. And a re-render does indeed re-invoke the component function.

So in this case, every time the button is clicked, doSomething is invoked and executes all of the logic therein.

What may be confusing you regarding re-renders in this specific case is the fact that doSomething is asynchronous and is not awaited. So after this executes:

setLoading(true)

A state update has been queued. It won't be processed until the thread is free to process asynchronous operations. That can happen here:

await new Promise(resolve => setTimeout(resolve, 5000));

It depends on whether the function itself is being awaited too. And in the code shown it isn't. So this operation puts another asynchronous operation on the queue, and frees up control to start processing the asynchronous operations already in place. Which, in this case, is a state update and a re-render.

Then when the above Promise resolves, the remaining operations in the function are processed. Which also includes a state update, which triggers a re-render.

Alternatively, suppose you didn't have anything asynchronous happening. Suppose you just did this:

console.log(1)
setLoading(true)
console.log(2)
setLoading(false)
console.log(3)

In this case only one re-render is (potentially) triggered. Multiple state updates are made, but states updates are asynchronous and batched. So they're all waiting until the thread is available, and then the batch of updates are processed. In this case the net result of those updates is no change, so there may be no re-render.

Niki · Answer 2 · 2022-09-30T14:03:50.533

0

I hope i understood your questions correctly. A call to setState is also asynchon and the changes are getting batched for performance gains. So your doSomething function probably runs to the end before the state Changes take effect.

Here is the respective Article in the React Docs: https://reactjs.org/docs/faq-state.html#what-does-setstate-do

edited Sep 30 '22 at 14:03

answered Sep 30 '22 at 14:03

Niki

46
3

I read this article before, but it did not answer my question precisely enough. If your answer was true, why is the Spinner appearing while the asynchronous operation is running? That would be impossible. In the case where there is no asynchronous operation in between the both state updates your answer is right. – JackFrost Sep 30 '22 at 14:28

Where does the function continue after a re-render?

2 Answers2

Linked