DEV Community

Discussion on: Understanding Reconciliation: React Rendering Phases

Collapse
 
iheathers profile image
Pritam Shrestha • Edited

Hey, Loved your post. I have been really trying to understand rendering process. I watched this youtube.com/watch?v=mLMfx8BEt8g video which is from 2017, today. Things might have changed since then. Because it mentions that the "whole virtual DOM is created from scratch whenever any of the component state changes. at 2:40 minutes" But you mentioned that "Instead, when your component state or props update React uses a flag to mark that component. Basically saying that this component has been marked for an update". So, which is the correct implementation at the time being?

My question is:
Which is the correct point/implementation at the time being?

Point 1. virtualDOM gets created from scratch whenever any of the component's state changes?

OR

Point 2. Instead, when your component state or props update React uses a flag to mark that component. Basically saying that this component has been marked for an update

React Profiler
Another thing is that:
To visualize all the rendering process, I have been trying to make use of React Profiler. But i am quite confused at what the chart actually represents. Does it represent the rendering phase only?

Is it representing the list of components which just renderened for the first time or re-rendered the next time but which may or may not get actually updated on Real DOM during commit phase?

Or

is it representing the list of components that got commited. By commited I am assuming it means actual update to Real DOM.

Collapse
 
iheathers profile image
Pritam Shrestha

I did read this post by the way. Having hard time grasping the concepts. I am basically confused at the interchange of the words rendered and committed at this point. reactjs.org/blog/2018/09/10/introd...