Discussion on: Build your own MobX-like state management library in 40 lines of code

[Michal Czaplinski]

Hi Nathan!
Sorry for the late reply! I understand what you mean now, but as far as I understand react, this is not exactly correct :)

React does not render the tree of components "top-to-bottom" so to speak, but rather creates a virtual-dom data structure which is then rendered to the screen. React contains a "scheduler" which decides when to do the actual rendering.

So, the cycle that you described, would rather look more like:

• The rendering of a parent starts, currentlyRenderedComponent = parent component.
• The rendering of a parent is finished, react returns a data structure which describes the shape of the parent and it's children. currentlyRenderedComponent === undefined
• React looks at the data structure that it just produced and starts to render the first child.
• The rendering of a child starts, currentlyRenderedComponent = child component.
• The rendering of the child is done, currentlyRenderedComponent = undefined.

Dan Abramov (from the react team) has written a blog post about the react rendering model, which I think describes what I'm trying to say in more depth and perhaps more eloquently :)

Here's the section that is relevant to your question: overreacted.io/react-as-a-ui-runti...

[Nathan]

Thank you for your explanations, that is the part I was missing and it's very clear now :)

[Michal Czaplinski]

you're very welcome! 👌