수정 - React Hook "useEffect"가 조건부로 호출됨

최근 반응 후크를 사용하기 시작한 경우 다음 오류가 발생했을 수 있습니다.
React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?
이 기사에서는 오류를 복제하고 오류가 발생하는 이유를 확인하고 오류를 수정합니다.

프로젝트 설정

다음 명령을 사용하여 반응 프로젝트를 만듭니다.

npx create-react-app react-useeffect-called-conditionally

문제 복제

이제 다음 코드를 사용하여 App.js를 업데이트합니다.

import React, { useEffect, useState } from "react"

const App = () => {
  const [isLoading, setIsLoading] = useState(false)

  if (isLoading) {
    return <div>Loading..</div>
  }

  useEffect(() => {
    // Load some data
    setIsLoading(false)
  }, [])

  return <div>App</div>
}

export default App

앱을 실행하려고 하면 브라우저에 다음 오류가 표시됩니다.

문제 이해

React는 return 문(inside isLoading 검사) 후에 useEffect을 호출하기 때문에 위의 오류를 발생시킵니다. 모든 후크는 모든 return 문 전에 정의되어야 합니다.

수정

수정은 간단합니다. if 조건 전에 useEffect 블록을 이동하면 코드가 제대로 작동합니다.

import React, { useEffect, useState } from "react"

const App = () => {
  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    // Load some data
    setIsLoading(false)
  }, [])

  if (isLoading) {
    return <div>Loading..</div>
  }

  return <div>App</div>
}

export default App