How does React update a component and its children after a state change?-CodePudding

The

It will make the change in the red component and then it will compare this virtual DOM to the old DOM. It will see the different part. Then it will apply the DOM changes only to that different component.

The updating phase starts if props or the state changes. If the data at the top level changes:

If it is passing that data down to its children, all the children are going to be rerendered. If the state of the component at the mid-level gets changed:

This time only its children will get rerendered. React will rerender any part of the tree below that node. Because the data that generates the children components' view actually sits at the parent component(mid-level one). But anything above it, the parent or the siblings will not rerender. because data does not affect them. this concept is called Unidirectional Data Flow.

You can see in action in chrome browser. chose the rendering and then enable the painting flushing option

If you make any change on the page, you will see that updated components will be flashed.