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
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.
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...
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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 aflag
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 updateAnother 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
. Bycommited
I am assuming it means actual update to Real DOM.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...