ESLint: Expected to return a value at the end of arrow function.(consistent-return)

ESLint에 의해 발생한 에러입니다.

 

 

---

 

 

문제

useEffect(() => {
  if (!response) {
    return setLoading(false);
  }

  api();
  ...
}

useEffect 훅에서 return setState를 줬더니 함수 자체에서 에러가 발생합니다.

 

공식 문서 찾아보니, 해당 문제의 발생원인은 아래와 같습니다

 

• return 문은 종료하기 전에 실행되지 않습니다. (it does not execute a return statement before it exits)
• 값을 명시적으로 지정하지 않은 return문을 실행합니다. (it executes return which does not specify a value explicitly)
• 정의되지 않은 return을 실행합니다. (it executes return undefined)
• return void 뒤에 식을 실행합니다. (it executes return void followed by an expression (for example, a function call))
• return 뒤에 정의되지 않은 것으로 평가되는 다른 식이 실행됩니다.
  (it executes return followed by any other expression which evaluates to undefined)

번역기를 돌린 거라 정확하게 해석되지는 않지만, 아마 위 상황 같은 경우는 4번에 해당하는 거 같습니다.

useEffect안에 callback으로 받은 함수는 void인데, return 하면서 setState가 실행되는 것 때문에 ESLint에서 에러로 잡은 것으로 보입니다.

 

 

---

 

 

해결방안

useEffect(() => {
  if (!response) {
    setLoading(false);
    return;
  }

  api();
  ...
}

 

간단하게  setState를 실행한 뒤, retrun 시킴으로써 useEffect를 종료시켰습니다.