javascript – Virtual Dom in react.js

If I have a structure like—

which internally contains html tags like h1, div, ul, li etc

My question is whether Virtual dom is formed by html tags i.e., h1, div, ul, li or react elemnts like –

, and

This question in my mind arose when I came to know about react’s reconciliation algorithm. what does react actually compares? Does it do shallow comparison and checks whether rendered child component like –

, is changing? or performs deep comparison and checks if present in is changing and updates only that particular div?

********************* EDIT *******************************

so I have this another question-

What if my react structure is like

 {renderBody()}

where this renderBody() is a JS funstion which returns some JSX. Now if my component conataining

 {renderBody()}

is re-rendered will it always update/re-render renderBody()’s HTML or will perform re-conciliation inside renderBody()’s HTML to update only required tags?