As my knowledge the image represent Virtual DOM and Browser DOM seem not right.
In Virtual DOM when the parent re-render (the top red node I named it VR1 ), the children (bottom red node I nam it VR2) is re-rendered as well (if its props from VR1 changed or they are not changed but we does not use PureComponent or some similar).
Bases on Virtual DOM and the “driff algorithm from React: https://reactjs.org/docs/reconciliation.html#the-diffing-algorithm)
the top red node from Browser DOM I name it BR1 will definitely be updated, but the bottom red node from Browser DOM I name it BR2 might or my not updated depend on VR2 is updated (mean return function in VR2 will generate different or same piece of HTML).