useEffect가 2번 불러져요

리액트를 사용해 코딩하다 보면 useEffect안에 fetch함수(api call)을 넣었을 때 Network Tab에서 2번씩 불러지는 현상을 본 적이 있을 거이다.

Dev Mode 이면서 React.StrictMode가 활성화 된 상태이라면, 사실 정상적인 동작이다.
StrictMode에서는 컴포넌트가 2번씩 마운트 되기 때문이다. useEffect의 dependency array가 비어있더라도, 2번 마운트 되기 때문에 모든 동작이 2번씩 일어난다.

(StrictMode 를 검색해보자, 어딘가에서 활성화를 시켰을 수 있다. 위 사진에서는 Next.js의 config에서 설정되었다.)

하지만 위와 같은 동작은 dev에서만 일어나고 production으로 빌드한다면 해결되는 문제이다

출처: https://dev.to/jahid6597/why-useeffect-is-running-twice-in-react-18c6