Estoy enviando una acción de comentario adicional en una publicación específica que vuelve a ejecutar el bucle del componente en lugar de actualizar uno específico. Supongamos que si tengo 100 publicaciones agregando comentarios a una publicación, se ejecuta el ciclo de componentes nuevamente y se itera nuevamente 100 veces. ¿Hay alguna forma de volver a renderizar solo un elemento específico en lugar de ejecutar todo el ciclo del componente nuevamente?

Aquí está mi código del componente en bucle

 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;