Revisiting Component Evaluations and Updates

Before exploring React's internal workings, it makes sense to briefly revisit React's logic for executing component functions.

Component functions are executed whenever their internal state changes or their parent component function is executed again. The latter happens because, if a parent component function is called, its entire JSX code (which points at the child component function) is re-evaluated. Any component functions referenced in that JSX code are therefore also invoked again.

Consider a component structure like this:

function NestedChild() {
  console.log('<NestedChild /> is called.');
  return <p id="nested-child">A component, deeply nested into the component tree.</p>;
}
function Child() {
  console.log('<Child /> is called.');
  return (
    <div id="child">
   ...