[☄️트러블슈팅] useEffect 내 setState 무한루프

원래 문제가 없던 코드에 이번에 border를 linear로 바꾸면서 set함수를 배열로 두개 넣어주다보니 에러가 발생했다.

# 원래 코드
useEffect(() => {
    if (isPost.data?.isAllSeen == false) {
      for (let i = 0; i < isPost.data?.seenPostList.length; i++) {
        if (isPost.data?.seenPostList[i].isSeen == false) {
          if (isPost.data?.seenPostList[i].isPublic == true) {
            setBorderColor(['#6935FD', '#9747FF']);
            setIndex(i);
            break;
          }
          if (isPost.data?.seenPostList[i].isPublic == false) {
            setBorderColor(['#FFAC7E', '#FFE4BC']);
            setIndex(i);
            break;
          }
        }
      }
    }
  }, [isPost]);

위에 처럼 공개포스트일 경우에는 위에 if문이 돌게 되고, 그게 아닐 경우에는 아래 if문을 돌면서 set함수가 돌게끔 로직을 짰었다.

하지만 아래 warning이 떴다.

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

이 말은 useEffect 안에 setState를 돌리게 되면 무한루프가 돌게 된다는 거다.

왜 그럴까?

useEffect 내에서 setState를 호출되면 -> 컴포넌트 재렌더링 -> useEffect 또 호출 -> 또 setState -> 또 렌더링..

이렇게 무한 루프의 늪에 빠지게 된다.

 

두가지 해결법을 적용했다.

1. 조건 검토

2. 의존성 배열 검토

 

일단 조건을 검토해봤다.

아직 보지 않은 포스트에 있어서 색을 지정해주는 로직을 아래 코드와 같이 수정했다.

그런데도 계속해서 에러가 나길래 뭐가 문제인고 하고 들여다봤다.

아직 useEffect가 3번 이상이 실행되는 걸 발견했고, 2번 해결법이었던 의존성 배열을 검토했다.

원래는 isPost를 의존성 배열 안에 넣어놨었는데, 너무 많이 실행되는 것 같아서 범위를 좀 더 좁혔다.

본 포스트 목록이 수정됐다는 건 => 포스트를 최소 하나라도 읽었다는 뜻이고, 그때 실행을 해주면 된다고 판단했다

useEffect(() => {
    if (isPost.data?.isAllSeen === false) {
      const unseenPostIndex = isPost.data?.seenPostList.findIndex(post => !post.isSeen);

        const color = isPost.data?.seenPostList[unseenPostIndex].isPublic
          ? ['#6935FD', '#9747FF']
          : ['#FFAC7E', '#FFE4BC'];
      
        setBorderColor(color);
        setIndex(unseenPostIndex);
    }
    else {
      setBorderColor(['#101011','#101011'])
    }
  }, [isPost.data?.seenPostList]);

이렇게 두가지 해결법을 모두 적용했더니 문제없이 잘 돌아갔다!!

 

이번 기회를 통해 useEffect 안에 set함수가 돌아가면서 무한루프가 발생하게 되는 이유랑 그에 맞는 해결방법을 알 수 있었고, useEffect를 사용할 때 이 부분을 조심해서 로직을 짜야겠다는 생각이 들었다.