DEV Community

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

Michal Czaplinski on June 10, 2019

⚠️ NOTE: This post assumes good familiarity with react. You don't need to be an expert, if you've used it to make UIs before, you're gonna be fine,...

Read full post

Nathan • Jun 11 '19 • Edited

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 ?

Michal Czaplinski • Jun 12 '19

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 store function?

Nathan • Jun 22 '19

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.

Michal Czaplinski • Jul 5 '19

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 • Jul 8 '19

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

Michal Czaplinski • Jul 8 '19

you're very welcome! 👌