RenderQueue doesn't appear to be ordered by depth

[esprehn]

Ideally you render top down to avoid doing wasted work on child components that a parent component is going to remove or pass different props to. It currently appears that the queue is in the order of the setState calls which means a child component might rerender and build up new dom and then a parent would render and do it again and possibly remove that child entirely or pass down different props.

https://github.com/developit/preact/blob/80ad4367e5352cbf6720f973a4488f6504498eb9/src/component.js#L58
https://github.com/developit/preact/blob/576dda310a8e31e524fa2ecc803d6d406597c41e/src/render-queue.js#L10

Instead I think you want to walk up the tree of components until you find the highest one with _dirty === true, render that and then repeat until every component is clean.

[developit]

It's not possible to walk the resolved tree in Preact because that would require walking the DOM (prohibitively expensive in this case).

I just checked and it appears when flushing the render queue, we iterate backwards. This means the order in that queue is actually a reasonable approximation of outermost-first.

One thing that might be interesting - we're looking at adding an _ancestorComponent property to components in #819. Perhaps that could provide a means to quickly determine if child component renders are invalidated by an enqueued parent component render.

[esprehn]

Can you explain why walking the dom would be too expensive?

[developit]

It would invoke a huge number of DOM getters and the time required would increase as DOM size increases.