수정 - React에서 예상보다 적은 수의 후크를 렌더링함

반응 애플리케이션을 처음부터 작업 중이고 후크를 사용하는 동안 다음 오류가 발생합니까?
Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
이 기사에서는 이 오류가 발생하는 이유와 해결 방법에 대해 설명합니다.

문제 복제

먼저 문제를 복제해 보겠습니다. 다음과 같이 코드를 업데이트합니다.

import { useEffect, useState } from "react"

function App() {
  const [hasError, setHasError] = useState(false)
  if (hasError) {
    const x = { foo: true }
    if (x.foo) {
      return <div>Error</div>
    }
  }

  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    setHasError(true)
  }, [])

  return <div className="App">Loading</div>
}

export default App

지금 코드를 실행하면 다음 오류가 발생합니다.

문제 이해

위의 오류는 조건 내부에 return 문이 있고 반환 후 useEffect 후크가 있기 때문에 발생합니다. Hooks의 규칙에 따라 조건에 관계없이 모든 Hooks를 실행해야 합니다. 따라서 return 문 이전에 모든 후크 호출을 유지 관리해야 합니다.

문제 해결

if 조건 위로 useEffect 후크를 이동하면 문제가 해결됩니다.

import { useEffect, useState } from "react"

function App() {
  const [hasError, setHasError] = useState(false)

  useEffect(() => {
    setHasError(true)
  }, [])

  if (hasError) {
    const x = { foo: true }
    if (x.foo) {
      return <div>Error</div>
    }
  }

  return <div className="App">Loading</div>
}

export default App