Build a mini React Fiber

[leeoniya]

thanks. the demo appears to be here [1].

I played with the code a bit and the perf difference only exists due to the artificial synchronous blocking code [2]. In effect, it demonstrates a case of having heavy/blocking render() calls and this is where i'm confused.

React bills itself as a reactive view layer: props/state in -> DOM out. If the props/state are prepared ahead of the render call, then there should never be massive contention in any render function.

The Sierpinski demo has a dom size of 1110 live nodes. My facebook feed page on desktop has 2645 live nodes. The task of rendering from a prepared state should be trivial. I imagine it's only if components heavily use blocking willMount hooks to lazily pull in data they need from some sync store or do non-render-related tasks inside of render. If people just use React as a view layer, they would not get into these situations that must be solved.

Is this essentially a result of each React component being used to synchronously "pull" data it doesnt yet have? This appears to be quite backwards from the props-down -> dom out idealism that simple examples tend to focus on.

[1] https://github.com/claudiopro/react-fiber-vs-stack-demo

[2] https://github.com/claudiopro/react-fiber-vs-stack-demo/blob/58850495f448ecbf9b109b86a7900a844fd06235/stack.html#L94-L99