maxium-update-depth-exceed 에러

요약 정리

컴포넌트가 무한 루프에 빠져서 상태 업데이트가 계속 반복될 때 발생

Pattern 1)

useEffect의 종속성을 가진 변수를 useEffect 안에서 업데이트 할 때

useEffect(() => {
  setUser(currentUser)
}, [user]);

Pattern 2)

같은 화면으로 반복해서 이동할 때
Router 컴포넌트는 사용자 상태(user)에 따라 조건부 렌더링을 사용하여 /login으로 리다이렉트하거나, 로그인한 사용자에 대해 메인 화면을 렌더링한다.
만약 /login 경로에서 사용자 상태가 변경되지 않고 계속해서 /login으로 리다이렉트하려고 한다면, 이는 무한 루프를 발생시킬 수 있으며, 결과적으로 "Maximum update depth exceeded" 에러를 유발할 수 있다.

// router.js
<React.fragment>
{!isAuthorized ? <Navigate to="/login" replace /> : <Navigate to="/" replace />}
</React.fragment>

{/* NOTE 명시된 path 외 정의되지 않은 모든 경로는 메인화면으로 리다이렉트한다 */}
<Routes>
  <Route path="*" element={<Navigate to="/monitor" replace />} />
</Routes>