Very interesting article ! But shouldn't currentlyRenderedComponent be a stack ? Because with this implementation (setting the variable to undefined) there is a risk of an observable object being accessed in a parent component after the rendering of a child. Is there something I'm missing ?
Yes.
Because currentlyRenderedComponent is a global variable, this can occur :
The rendering of a parent starts, currentlyRenderedComponent = parent component.
The rendering of a child starts, currentlyRenderedComponent = child component.
The rendering of the child is done, currentlyRenderedComponent = undefined
The rendering of the parent continues, an observable object is accessed, but currentlyRenderedComponent === undefined so it considers that we are outside of a component.
Then, when the observable object is modified, the parent component is not rendered again. A fix for that is replacing currentlyRenderedComponent by a stack in which we push a component when it starts rendering and we pop it when it's done.
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 :)
Very interesting article ! But shouldn't currentlyRenderedComponent be a stack ? Because with this implementation (setting the variable to undefined) there is a risk of an observable object being accessed in a parent component after the rendering of a child. Is there something I'm missing ?
Hi Nathan! Thanks for your interest! Perhaps it's me, but I'm not quite sure what you mean : )
By "observable object", do you mean the object wrapped with the
storefunction?Yes.
Because currentlyRenderedComponent is a global variable, this can occur :
Then, when the observable object is modified, the parent component is not rendered again. A fix for that is replacing currentlyRenderedComponent by a stack in which we push a component when it starts rendering and we pop it when it's done.
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:
currentlyRenderedComponent = parent component.currentlyRenderedComponent === undefinedcurrentlyRenderedComponent = child component.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...
Thank you for your explanations, that is the part I was missing and it's very clear now :)
you're very welcome! 👌