React fetch API called 2 times on page load

 

React JS를 공부하면서 fetch 요청이 두 번 가는 것을 확인

  const getDetail = async () => {
    const json = await (
      await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
    ).json();
    setDetail(json.data.movie);
    setLoading(false);
  };
  useEffect(() => {
    getDetail();
  }, []);

코드에는 문제가 없는 것으로 파악

 

알고보니 developement mode 에서 빌드 + developement mode 에서 활성화되는 StrictMode 옵션 때문인 것이었다.

 

참고문헌

https://stackoverflow.com/questions/72406486/react-fetch-api-being-called-2-times-on-page-load

React Fetch API Being Called 2 Times on page load

https://ko.legacy.reactjs.org/docs/strict-mode.html

Strict 모드 – React

 

위 코드에서 StrictMode 부분을 제거하니 정상적으로 fetch API 가 한 번만 호출