Rendered more hooks than during the previous render

제목을 보면 알 수 있듯이 이슈 내용은 다음과 같았다.

 

Rendered more hooks than during the previous render.

 

 

<원인>

훅의 호출횟수가 일정하지 않다는 뜻인데 원인으로는 리액트 훅 같은 경우 컴포넌트 내부 최상위 레벨에 선언되어야 한다. 또한 컴포넌트 리턴 이후에 리액트 훅이 발견되면 해당 오류가 발생한다. 나의 경우 모달 컴포넌트를 구현하였고 모달이 열려있지 않다면 조건문을 통해 빠져나가도록 구현했다. 하지만 조건문 밑에 useEffect 훅이 있었고 이는 조건문에서 이미 렌더를 하는데 페이지에서 사용될 수 있는 훅이 존재하는 것이므로 해당 에러가 발생했다.

 

<해결>

✅ 기존에는 if (!isModalOpen) return null 부분이 useEffect 위에 있었는데 해당 부분을 맨 밑으로 이동 시킴으로써 에러 해결 완료

  const { isModalOpen, closeModal } = loginModalStore()
  const [inputIdValue, setInputIdValue] = useState('')
  const [inputPasswordValue, setInputPasswordValue] = useState('')

  const handleIdInputChange = (e) => {
    setInputIdValue(e.target.value)
  }

  const handlePasswordInputChange = (e) => {
    setInputPasswordValue(e.target.value)
  }

  useEffect(() => {
    setInputIdValue('')
    setInputPasswordValue('')
  }, [])

  if (!isModalOpen) return null

 

 

<참고 레퍼런스>

https://stackoverflow.com/questions/55622768/uncaught-invariant-violation-rendered-more-hooks-than-during-the-previous-rende

Uncaught Invariant Violation: Rendered more hooks than during the previous render