re: Build your own MobX-like state management library in 40 lines of code VIEW POST

TOP OF THREAD FULL DISCUSSION
re: Yes. Because currentlyRenderedComponent is a global variable, this can occur : The rendering of a parent starts, currentlyRenderedComponent = par...

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...

code of conduct - report abuse