Render from the topmost dirty component downward

[joshaber]

Currently each component re-renders itself when its state changes. This works, but it's less than ideal.

Consider a component A which renders a component B. If both update their state in the same runloop, component B will be rendered twice: once by itself because of its state update, and once when component A re-renders itself.

We should start each re-render from the topmost dirty component.

(I don't think there are any correctness problems here, but it's certainly less performant.)

[mrjjwright]

Yeah I noticed this. Each Component enqueues a render when it's state changes and is adding a separate render run loop handler. React handles this via keeping tracking of a component's owner. React distinguishes a component's owner versus it's parent. Each component can have only one owner of course, the react component that gave it it's properties. There is a single global ReactCurrentOwner.owner property that is set at the beginning of a render and represents the current owner of any elements under construction in the render. If another render is called again when a render is in place (distinguished by ReactCurrentOwner.owner != null) a warning is thrown in dev mode. At the end of the render it is set back to null. See: https://github.com/facebook/react/blob/master/src/core/ReactCompositeComponent.js#L784. You probably already knew this but I used this as an excuse to learn more.

In a parallel native environment you probably don't want to use the global flag.