[react-query] useEffect에서 react-query의 useMutation을 사용할 때 dependencies 으로 인한 무한 요청 해결방법

react-query를 사용해서 POST 요청을 하기 위해서는 react-query의 mutate를 사용하고, 비동기 요청을 위해서는 mutateAsync를 사용한다.

 

페이지에 접속했을 때, POST 요청을 보내는 시나리오가 있어서 아래와 같이 useMutation을 선언하고, useEffect에 mutateAsync를 호출했다.

회사와 관련된 코드가 있어서 간단하게 작성했다.

위와 같이 선언 및 호출을 하고, 페이지에 접속하고, 크롬 개발자도구의 Network 탭에 접속해보면 해당 요청이 2000~3000개 이상 요청된다.

 

이런 현상이 발생하는 이유는 mutateAsync를 통해서 POST 요청이 실행되고, 해당 요청으로 인해서 mutation 객체가 변경되었기 때문에, useEffect가 다시 실행되어 mutateAsync가 계속 요청되는 것이다.

 

이런 현상을 해결하기 위해서 아래와 같이 변경하면된다.

useMutation의 mutateAsync를 destruct하고, mutateAsync만 useEffect의 dependencies로 추가한다.

이렇게 변경하면 mutateAsync가 실행되어도 mutateAsync 자체는 변경되지 않기 때문에 useEffect가 다시 실행되지 않는다.