DEV Community

Stephane Smirnow
Stephane Smirnow

Posted on

Why would a React component recreate all its memoized children ?

Hello from Belgium,

I have a tree of similar components, each memoized with a custom areEqual. They represent a directory tree in reality. Only the root component knows the full directory structure, and pass down that information recursively to its children as a prop. It is working perfectly well: if I "fold" a child, in exemple, the areEqual functions are called only for that child parents and nothing else is rerendered.

My only problem is when I fold the root component: the root areEqual is tested, return false (as expected)... and then all the children of the whole tree are unmounted/remounted, without a single call to their areEqual functions! In the inspect Profiler companion, I see those children "created for the first time", indicating me that the root parent, when rerendering, considers all its children as being new.

So my question is as fellow: the children areEqual function not being called, they are obviously not recreated because of a prop change. But after several hours of testing, I still don't have a clue on why the root parent consider all of its childrens to be new components. Do you have any idea on how to determine why a component considers its children components to be new instances – even if there are all supposed to be memoised instances ? I'm completely lost on this one :(

Thank you very much in advance !

Top comments (0)