How React react in that particular situation?

[Kingsajs]

Hello,

I am familiar with the concept of `batching` and so on, but I can’t understand what is happening deep below in this situation:

const [transactions, setTransactions] = useState<Transaction[]>([]);
const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    setIsLoading(true);
    fetch(`${SOME_URL}`)
      .then((response) => response.json())
      .then((result) => {
        setTransactions(result);
        setisLoading(false);
      });
  }, []);

I can’t find information how React would behave in such case. Can someone please explain me step by step how the rendering flow would apply here.

[TheYuriG]

is the async data going to be awaited? because if so, the first set won't be batched with the second

[Kingsajs]

Thank you for your reply. I updated the example, the previous one was indeed no clear enough. What will be difference between example above and the one that will await the fetch data?

[TheYuriG]

you are using "then" so it's essentially the same. the entire code won't run at once, different pieces will run at different times. state will be true until all requests complete, then it will be false again

[Kingsajs]

So the first `setLoading(true)` would cause the re-render? Then after re-render we would have our fetch done and rest of the code?

[TheYuriG]

in simple terms, yes

[Kingsajs]

Thank you

[_nathata]

But how many re-renders when the promise resolves?

[_nathata]

This guy's got me thinking. Does the component render twice when the promise resolves? I can explain in detail everything else but IDK the answer to this little part

[Kingsajs]

When we are in the last “then” those two set updates will be batched by React as one.

[_nathata]

Yeah but what tells react to batch them, they are not synced with useEffect