좋아요, 팔로우버튼을 빠르게 눌렀을 때 일어나는 버그 수정

Problem : 좋아요와 팔로우버튼을 빠르게 여러번 클릭했을 때, api호출이 끝나기도 전에 바로 api호출을 하여서 에러 발생.

Reason : 당시 버튼에 debounce나 throttle, disable처리가 되어있지 않아 발생한 문제였음

Try to solve : debounce나 throttle보다는 disable 처리가 적합하다고 생각하여 state를 하나 생성하여 api 호출중인지 여부를 판단하기로 함.

const [isProcessing, setIsProcessing] = useState(false);
//...

// 좋아요 클릭
  const handleClickLike = () => {
    if (!postId || isProcessing) return;

    setIsProcessing(true);

    apiInstance({
      method: "get",
      url: `like/posts/${postId}`,
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
    })
      .then(() => {
        setIsLike(true);
        setLikeCount(likeCount + 1);
      })
      .catch((error) => {
        console.error("There was an error!", error);
        redirectToLogin();
      })
      .finally(() => setIsProcessing(false));
  };

//...

isProcessing으로 api처리 중 여부를 판단하여 api처리 중일때는 api호출을 보내지 않는식으로 변경.

좋아요 하트 랜더링시에 isProcessing이 true일 때는 onClick함수가 실행하지 않도록 함.

// 좋아요 아이콘을 보여주는 함수
  const renderLikeIcon = () => {
    if (isLike) {
      // isLike가 true일 때
      return (
        <div className="relative" onClick={isProcessing ? undefined : handleClickUnlike}>
          <AiFillHeart className="md:text-4xl text-3xl mr-2 cursor-pointer text-red-600" />
        </div>
      );
    } else {
      // isLike가 false일 때
      return (
        <div className="relative" onClick={isProcessing ? undefined : handleClickLike}>
          <AiOutlineHeart className="md:text-4xl text-3xl mr-2 cursor-pointer" />
        </div>
      );
    }
  };

• 결과