2025-10-16

useMutation 삽질 (무한루프, mutate, mutateAsync)

useEffect 내 mutation 의존성 배열 추가시 무한 로딩?

다음과 같이 코드를 구성했을 때 무한 로딩이 발생하는 경우가 있다.

const mutation = useMutation();


useEffect(() => {
  mutation.mutate();
}, [mutation]);

mutation 객체가 요청에 의해 변경되기 때문에 무한 루프가 발생하는 것이다.


mutate 자체는 호출 이후에도 변경되지 않기 때문에 다음과 같이 작성하면 된다.

  const { mutate } = useMutation();


  useEffect(() => {
    mutate();
  }, [mutate]);

mutation? mutateAsync?

useMutation을 사용할 때 mutate와 mutateAsync 중 어떤 것을 사용해야 할까?

mutate는 아무것도 반환하지 않고 mutateAsync는 Promise를 반환한다.


mutate에서는 콜백을 통해 data 혹은 error에 접근할 수 있다.

하지만, mutateAsync는 Promise를 직접 제어할 수 있게 해주어 수동으로 오류를 처리해야 한다.

// mutate: 콜백으로 접근
mutate(data, {
  onSuccess: (data) => {
    console.log(data);
  },
  onError: (error) => {
    console.log(error);
  }
});


// mutateAsync: Promise로 직접 제어
try {
  const data = await mutateAsync(data);
  console.log(data);
} catch (error) {
  console.log(error);
}

메인테이너는 mutate을 권장한다.

참고 문서