What are render and commit phase exactly in React JS? And how virtual DOM helps actually?

Question

I have read many blogs on render and commit phase in react. But couldn't understand much exactly. They mention render phase is a slow process and commit phase doesn't takes time.

In simpler words, is rendering checking the current Virtual DOM with previous Virtual DOM starting from the root/or the point where states/props are changed? And committing is putting the change in the batch which will go in the next batch update to real DOM?

If we consider rendering as a run of diffing algorithm, the function component -

function ReactApp(){
  console.log("rendering...");
  return (...<Child/>....);
}

function Child(){ 
  console.log("rendering child...");
  useEffect(() => {
    console.log("mounting child...");
  })
  return (...);
}

Will render and "rendering..." can be seen in console. It's mentioned useEffect (all componentDidMount,didupdate,willUnmount) will run only in commit phase.

But if this component has a child component and the parent renders when parents' states changes. "rendering..." should be visible in console for parent. "rendering child..." should be visible in console too. And it does. But why "mounting child..." can be seen in console, if no states changed for it.

In reconciliation process, only parent's UI update should go into batch. And child should only be checked by rendering.

This is creating a lot of confusion among words - 'rendering','mounting','committing'.

Also, we can see the changes on changing state instantly, which means real DOM gets updated quickly? Or the process is quite faster for a human to perceive changes between a react and a non-react app? If virtual DOM concept is that powerful, why don't browsers already have it in-built?

Sorry if some/all questions seem stupid. But I really want to know it in a manner I can explain it to a 5 year. Any links to simpler docs would be grateful too.