React: Use State to Toggle an Element

[josephylee]

Hello,

I have a question about some behind-the-scenes details, if someone could please enlighten me.

Link to the challenge here.

Instead of simply passing an object as an argument to setState(), we are told we need to pass a function that returns an object.

It talks about how setState() is asynchronous, and if we don’t pass a function, then the setState() method won’t receive the most updated values.

Is this because of the event loop? Because setState() is asynchronous, a subsequent toggle call might return the state before it has updated, whereas if we return the object in a function, then a function will be queued in the event loop and wait for all the previous, asynchronous calls to setState() to complete before the function executes in the event loop?

Thank you.

[lanceamd]

Yes, that’s correct. the event loop in JavaScript.

When you call setState(), the new state is not immediately updated. Instead, React will schedule an update and execute it later when the event loop is available. If you call setState() multiple times in the same synchronous execution context, the updates may be batched together for better performance.
By passing a function that returns an object, you ensure that the latest state is used in the update. The function will be queued in the event loop, and once it is executed, it will receive the most updated state.

[josephylee]

@lanceamd

Awesome. Thank you very much!