4

The React event loop is mentioned in some articles about the Virtual DOM. Some examples (bold is mine):

Whenever you call setState on a component, React will mark it as dirty. At the end of the event loop, React looks at all the dirty components and re-renders them.

— React diff’s algorithm

or

Most notably, changes to the virtual DOM are not guaranteed to take effect immediately. This allows React to wait until the end of its event loop before it even touches the real DOM at all.

— React Demystified

However, I can’t find any documentation about this event loop. Does it exist at the moment? What stages does it have? What does it affect?

Community
  • 1
  • 1
Ivan Akulov
  • 4,323
  • 5
  • 37
  • 64
  • 2
    Possible duplicate of [Understanding the Event Loop](http://stackoverflow.com/questions/21607692/understanding-the-event-loop) – sdgluck May 24 '16 at 10:13
  • 2
    @sdgluck, that question is about plain JavaScript event loop, and it looks to me like these articles are talking about something more React-specific. – Ivan Akulov May 24 '16 at 10:27
  • 2
    I think the quotes shared are worded poorly and are what is causing confusion (the second in particular: _"its event loop"_ instead of _"the event loop"_). I think they are actually referring to the idea that React batches changes and applies them at a time decided to be most efficient, but not that it implements its own event loop. – sdgluck May 24 '16 at 10:41
  • I second what @sdgluck said, what described in quotes references JS event loop and describes how React works currently. – andreypopp May 24 '16 at 10:56

1 Answers1

1

Note, I am not answering specific questions because the subject is a moving target. The reason its not specifically documented is because its implementation varies on the flavor of React (browser/native) etc. An interesting discussion is in this group - https://groups.google.com/forum/#!topic/reactjs/G6pljvpTGX0. The most important thing to note about it is that the updates are batched and don't happen synchronously. You can read more about the various implementations by looking at the source code for the keyword batchingstrategy.

hazardous
  • 10,627
  • 2
  • 40
  • 52