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