Will React functional component always re-renders as long as it has a child component?

Question

I have been struggling with a performance problem in a React (React Native to be exact) app for days. It boils down to this problem:

When a Parent function component has another function component as the Child, the Parent will always re-renders whenever its own parent (GrandParent) re-renders. And this is true even if all components are memoized with React.memo.

It seems to be a fundamental problem for React, because in this common situation, HeavyParent will always re-renders whenever LightGrandParent re-renders, even if neither HeavyParent nor LightChild needs re-rendering. This is obviously causing a massive performance problem for our app.

<LightGrandParent>
  <HeavyParent>
    <LightChild />
  </HeavyParent>
</LightGrandParent>

I can't believe this is how React works. Did I miss anything?

I created a sandbox to show what I mean.

Answer 1

The answers @yousumar and a few other folks provided were correct. However, this also means a very surprising phenomenon demonstrated as follows:

I know many developers won't see this as a problem and will just say "hey this is how it works". But I personally think that this at least represents a shortcoming in React's fundamentals, as it violates the principle of least surprise. Also React's core doc should have pointed this out so that developers like me wouldn't get burned.