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

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.

CodePudding user response：

In the structure you pasted witch is right below

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

LightGrandParent will consume HeavyParent via props.children, witch gives you automatically optimisation as React re-renders HeavyParent only if LightGrandParent re-renders because its props has changed, not when it is because its state has changed.

Now if you wanna also control re-renders because of props change in LightGrandParent, you can use useMemo to memorise HeavyParent. But it is to know that memorising is not free, it consumes ressources. Incorrect memorisations will kill your performance.

If you wanna know more about memorising and how React re-renders, I suggest you to watch this wonderful mini series on YouTube.