I am dispatching an add comment action on a specific post re runs component loop again instead of updating a specific one. Suppose, If I have 100 posts adding comments to one post runs the component loop again and iterates again 100 times. Is there is any way to re-render only a specific item instead of running the whole component loop again?

Here's my code of the looped component

const Post = ({totalComments, like, _id, image, caption}) => {
    const {enqueueSnackbar} = useSnackbar();
    const dispatch = useDispatch();
    const { user } = useSelector((state) => state.loadUser);
    const { loading: loadingComments, comments } = useSelector((state) => state.listComments);
    const { success: addCommentSucess, error: addCommentError } = useSelector((state) => state.addComment);
    const [openComment, setOpenComment] = useState('');
    const [commentsLength, setCommentsLength] = useState(totalComments);

  //listing of comments
  useEffect(() => {
    
    if (addCommentError) {
      enqueueSnackbar(addCommentError, {variant: 'error'});
      dispatch(clearErrors());
    }


  }, [addCommentError, addCommentSucess, dispatch, enqueueSnackbar]);

  const openCommentHandler = () => {
      dispatch(listComments(_id));
    setOpenComment(!openComment);
  }

  const addCommentHandler = (data) => {
      console.log('addcomehandle')
    dispatch(addComment(data));
    setCommentsLength(commentsLength+1);
  }
 

  return (
    <Card className='post-container'>

        <div className='button-wrapper'>
          <IconButton onClick={openCommentHandler} color={openComment ? 'primary' : 'default'}>
            <SvgIcon component={CommentOutlinedIcon} />
          </IconButton>
          <p>{commentsLength}</p>
        </div>

      {!loadingComments && openComment && (
        <Comments comments={comments} />
      )}

      <Divider />
      <AddComment onAddComment={addCommentHandler} postId={_id} />
    </Card>
  );
};

export default Post;