React.memo re-renders recursive components without running the areEqual function

Question

I have a page with comments. One comment can contain a children field which is an array of comments. I have a component CommentGroup which renders a CommentCard and if the field children is found, another CommentGroup is rendered with the children. This is what it looks like :

<div className={styles.commentsWrapperElements}>
  <div className={styles.commentsWrapperElementsParent}>
      <CommentCard
          comment={comment}
          key={comment.id}
          collapsed={collapsed}
          onReplyClick={onReplyClick}
          onDeleteClick={onDeleteClick}
          repliedTo={replyToId === comment.id}
          order={order}
      />
  </div>
  {comment?.children?.length > 0 ?
      <div className={styles.commentsWrapperElementsChildren}>
          {comment.children.map(e => <CommentCardGroup
              comment={e}
              replyToId={replyToId}
              onDeleteClick={onDeleteClick}
              onReplyClick={onReplyClick}
              key={e.id}
              addComment={addComment}
              order={order}
          />)}
      </div> : <></>
  }
</div>

I use a React.memo on this component with a custom function, it works fine for the top Components but not the children (nested ones). I used this function to debug :

export function areEqual(prevProps, nextProps) {
    console.log('-');
    return false;
}

The number of logs is equal to the number of parent elements, this function is not run for the children even tho it's the same component.

score 1 · Accepted Answer · answered Mar 20 '21 at 14:56

1

I found out why, I did the memo on the export, so the component used for the children is not the memorized one, my bad.

answered Mar 20 '21 at 14:56

Y_Djin

21
4

One way to avoid this mistake could be - give a different name to UnMemoized component and different to Memoized one. For example: `export default function CommentCardGroup__() { ...` and `const CommentCardGroup = React.memo(CommentCardGroup__, areEqual)` – Ajeet Shah Mar 20 '21 at 14:59
1

Yep, thats what i did to resolve the issue: `const MemoCommentCardGroupReact = React.memo(CommentCardGroup, equal); export default MemoCommentCardGroupReact;` Then used the MemoCommentCardGroupReact one; – Y_Djin Mar 24 '21 at 23:44

React.memo re-renders recursive components without running the areEqual function

1 Answers1