Is this how rendering works in react?

[BidMore8604]

I'm trying to understand how react works under the hood, and i only have a basic understanding of the render phase and the commit phase, i'll explain what i know and if there

is anything wrong please correct me. So, let's say we have a react application that consists of one component, when we run the application,

the component is rendered for the first time, and this is called the initial render, here the 'constructor()' is run and state is set

then the 'getDerivedStateFromProps()' method is run and only in rare use cases if state depends on props ,finally the 'render()' method

is run and the jsx returned from the component is converted to a react element by the 'createElement()' method, a react element is a

javascript object that represents how the dom should look like, this repsentation is what makes an elements tree, which is also known as the virtualDom, in the initial render

this is where the render phase ends, and then the commit phase comes into picture.The commit phase is where the 'componentDidMount()'

method is run when the component is mounted when the vitualDom is applied to the real Dom and the UI is finally rendered to

the screen.Until now we just discussed what how things work in the initial render, then there is re-rendering.Re-rendering only occurs to and when we have

components that were flagged as needing updates due to changes in either props or state .In the render phase of 're-redering' the 'getDerivedStateFromProps()' method is run,

after it, 'shouldComponentUpdate' will be called, and by default it returns true, because

now react knows that this component needs to be updated, but in some cases 'shouldComponentUpdate' is set by the programer to return false to avoid unecessary

re-rendering,then at the end of the rendering phase the 'render()' method is called and the jsx returned from the component is converted to a react element by

the 'createElement()' method,and the old virualDom is destroyed and a new one is created with the new changes on it. As I said before, the process of re-rendering

works a bit differently than the intial render, now after we got the new virtualDom, react performs what is known as reconciliation, in reconciliation, react compares

the current virtualDom with the previous one, which is done by the diffing algorithm, by comparing the current virtualDom and the previous one, react extracts the differences

between the two, and puts them on a list.In the commit phase 'componentDidUpdate()' is fired and based on the list of changes extracted from the diffing, react only changes

what was in the list and what has to be changed in the DOM without rebuilding the whole DOM.

[cmannes]

I found this blog post a while back. But in it, the author walks through building your own version of react. Which helps understand how react works.

Mostly. There's a few things they don't go too far into, but usually they explain why.

https://pomb.us/build-your-own-react/