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

user_712203 0
Viewed 352

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.

react-native reactjs javascript
2 Answers

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 React.memo 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.

user_152886410

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

enter image description here

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.

user_7122030
Related