프로젝트 도중 문제점이 발생했습니다...

안녕하세요 선생님

도움 요청드립니다.

첫번째, 좋아요 기능 렉 문제

SNS를 만들었는데요. 좋아요 기능이 있습니다. 좋아요를 누르면 좋아요 갯수가 올라가고 좋아요를 누른 상태에서 다시 한번 더 누르면 취소가 됩니다. POST 방식으로 어떤 유저가 좋아요를 누르면 해당 게시물에 좋아요 수를 +1 해주고 좋아요를 누른 유저 (배열데이터)에도 해당 유저의 아이디를 push하고 취소를 하게 되면 좋아요 수-1  해주고 좋아요 누른 유저를 pull 하는 방식으로 구현했습니다.

그런데 5~6번 클릭하면 렉이 걸리는지 사이트가 멈춥니다. 어떻게 해결하면 좋을까요?

두번째, useEffect 무한루프 문제

Node js 게시판이지만... React랑 연동해서 하고 있어서 여기에다가 질문 올립니다.

useEffect의 무한루프 방지를 위해 useEffect 두번째 인자 배열에 state값을 넣었지만 페이지가 켜있는 상태에서 계속 재렌더링이 일어납니다...참고로 posts라는 state는 객체 형태입니다. 또한 서버에서 받아온 res.data도 객체 데이터입니다. res.data 객체 데이터를 받아서

posts state에 저장한 후  실시간으로 바뀌는건 posts.like 과 posts.comment 입니다.

    const [posts, setPosts] = useState({});

    useEffect(()=>{
        axios.post("/detail/getpost",{id:id})
        .then((res)=>{
            console.log(posts);
            setPosts(res.data);
        }).catch((err)=>{
            console.log(err);
        })
    },[posts]);

app.post("/detail/like",loginCheck, function(req,res){
    let id = parseInt(req.body.id);
    db.collection("post").findOne({_id:id},function(error,result){
        if(error) return console.log(error);
        if(result.likeUser.includes(req.user.id)){
           db.collection("post").updateOne({_id:id},{$inc:{like:-1}},function(error,result){
                if(error) return console.log(error);
                db.collection("post").updateOne({_id:id},{$pull:{likeUser:req.user.id}},function(error,result){
                    if(error) return console.log(error);
                    
                })
           })
        } else {
            db.collection("post").updateOne({_id:id},{$inc:{like:1}}, function(error,result){
                if(error) return console.log(error);
                db.collection("post").updateOne({_id:id},{$push:{likeUser:req.user.id}},function(error,result){
                    if(error) return console.log(error);
                    
                })
           })   
        }
    })
})