Part 9

9.0 Part 9 (clickable)

But let’s move back..

As you noticed on the scheme, the call of setState method, can be triggered in several ways, be more precise, with, or without, external impact (means ‘user action’). Let’s take two cases: in the first case, the method call is triggered by mouse click, and second, just call from setTimeout in componentDidMount.

What actually makes that difference? Well, as you remember, React process updates in batches, it means that list of updates should be somehow collected and, then, flushed. The thing is that when mouse event appears, it’s handled on the top level and then, through several layers of wrappers the batched update will be started. By the way, as you can see it happens only if ReactEventListener is enabled (1), and, if you remember, during a component mounting phase, one of ReactReconcileTransaction wrappers actually disables it, and make mounting safe. Smart enough! But, what about setTimeout case? It’s also simple, before putting a component into dirtyComponents list React will make sure that transaction is started (opened), so then, later, it should be closed and updates flushed.

As you know, React implements ‘synthetic events’, some ‘syntax sugar’ which in fact wraps native events. But then, later, they still try to behave how we all used to see events. You can see the comment in the code:

‘To help development we can get better dev tool integration by simulating a real browser event’

var fakeNode = document.createElement('react');

ReactErrorUtils.invokeGuardedCallback = function (name, func, a) {
      var boundFunc = func.bind(null, a);
      var evtType = 'react-' + name;

      fakeNode.addEventListener(evtType, boundFunc, false);

      var evt = document.createEvent('Event');
      evt.initEvent(evtType, false, false);

      fakeNode.dispatchEvent(evt);
      fakeNode.removeEventListener(evtType, boundFunc, false);
};

Alright, back to our update, let’s see one more time. The approach is:

call setState
open batching transaction if it’s not opened yet
add affected components to dirtyComponents list,
close transaction with calling ReactUpdates.flushBatchedUpdates, what actually means ‘process whatever was collected into dirtyComponents’.