reactjsrecursionrerendermemo

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


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.


Solution

  • 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.