2023.06.26[nextjs - setState 경고]

❓문제상황

리코일로 data를 저장하면서 set 해주는 부분이 있었는데 관련해서 경고가 떴었다.

 Cannot update a component (Batcher) while rendering a different component (RecommendInputPage). To locate the bad setState() call inside RecommendInputPage ...

 

여기서 문제가 되는 부분이 아래의 코드 부분이었다.

if (isSuccess) {
    setBookRecommendResult(data);
    return <RecommendComplete />;
  }

데이터 fetch 가 성공했을 때 해당 데이터를 recoil에 업데이트한 후에 컴포넌트를 보여주는 부분이었다. 여기서 recoil에 set 해주는 부분이 useEffect 안에 있지 않아서 렌더링 중에 함수가 호출되면서 경고가 나타나는 상황이었다.

 

✅문제해결

그래서 set 해주는 부분을 useEffect 내부에서 처리해주어 경고를 제거하였다.

useEffect 내부에서 처리함으로써 렌더링이 완료된 후에 해당 set이 실행될 수 있도록 할 수 있도록 하는 방법이었다.

useEffect(() => {
    if (isSuccess) setBookRecommendResult(data);
  }, [setBookRecommendResult, data, isSuccess]);

이렇게 수정해주니 경고문이 더이상 뜨지 않았다!