useEffect hook을 조기 종료하는 방법

useEffect hook을 조기 종료하는 방법

문서에는 컴포넌트의 최상위 레벨에만 후크를 호출해야 한다고 나와 있습니다.useEffect의 API로 인해return는 이미 청소용으로 예약되어 있기 때문에 어떻게 하면 if 스테이트먼트를 완전히 네스트하지 않도록 useEffect 훅을 조기에 종료할 수 있는지 궁금했습니다.

// instead of
React.useEffect(() => {
  if (foo){
    // do something
  }
})

// I would rather write something like
React.useEffect(() => {
  if (!foo){
    // exit early and stop executing the rest of the useEffect hook
  }

  // do something
})

어떻게 하면 좋을까요?첫 번째 예에서는 복잡한 조건부 논리로 인해 상황이 빠르게 혼란스러워질 수 있습니다.특히 사용할 수 없는 것을 고려하면useEffect조건문 안에 있습니다.

모든 기능과 마찬가지로 이 기능을 통해 조기 종료할 수 있습니다.return키워드를 지정합니다.

다음 2개의 스니펫이 동일합니다.

React.useEffect(() => {
  if (foo){
    // do something
  }
})


React.useEffect(() => {
  if (!foo){
    return;
  }

  // do something
})

간단한 해결책은 함수를 만들고 반환하는 것이라고 생각합니다.

 useEffect(() => {

        const fetchData = async () => {
           
           if (!foo) return

        }

        fetchData()

}, [])

언급URL : https://stackoverflow.com/questions/54615626/how-to-early-exit-useeffect-hook