Understanding React Composition Pattern

Why components doesn't get re-rendered when passed as children

Following is a very good example to understand why components doesn't get re-rendered when passed as a children to parent component.

For example:

<CompA>
  <CompB>
    <CompC />
  </CompB>
</CompA>

Imagine them as functions that receive a parameter called "children"

const childrenC = compC()
const childrenB = compB(childrenC);
const CompA = compA(childrenB);

The CompA function can be called as many times as we want, "childrenB" and "childrenC" will always be the same because they weren't updated by the function being called again.

The CompA is just receiving them as parameters. So no matter what happens inside the function, the function that updates them is not being called.

Bringing it to React, what happens is that CompB and CompC are owned by the same parent as CompA, so they will only update when that parent updates or by some internal change.