useEffect 무한루프

팔로우 기능을 구현하는 중에 useEffect가 무한루프되는 현상이 발생했다.

useEffect 의존성배열을 빈배열로 두었음에도 해결되지가 않아서 어떻게 해야할지 고민이였다.

이를 해결하기 위해 구글링을 하던 중 useEffect 실행조건에 관한 정보를 찾게되어 해답을 찾을 수 있었다.

 

useEffect 실행조건

 

1. 의존성 배열 안에 값이 없을 때

• 컴포넌트 생성 후 처음 화면에 렌더링
• 컴포넌트에 새로운 props가 전달되며 렌더링
• 컴포넌트의 state가 바뀌며 렌더링

2. 의존성 배열이 빈 배열일때

• 컴포넌트 생성 후 처음 화면에 렌더링

3. 의존성 배열에 값이 있을 때, useEffect는 아래와 같은 상황에서 작동됨

• 컴포넌트 생성 후 처음 화면에 렌더링
• 종속성 배열 내 엘리먼트의 값이 변할 때

 

무한루프의 원인: useEffect 함수 내의 setState 때문

 

1. useEffect로 인해 setState가 실행되어 그것이 다시 useEffect를 작동시킴

2. 의존성배열이 빈배열일때는 어떤 state든 변경되기만 하면 useEffect가 실행됨

 

해결방안

 

1. 처음 화면을 렌더링 할때만 useEffect를 실행시킬 경우, 의존성 배열로 빈 배열 사용하기

2.setState를 useEffect 내부에 넣지 말고, 이벤트 함수에 넣기 (이벤트 발생시에만 useEffect가 실행된다.)

3.의존성 배열안에 엘리먼트가 많을 경우, useEffect를 여러개 사용하는 것도 방법이다.