[React JS] Warning: Internal React error: Expected static flag was missing. 에러와 hook 호출의 규칙

Warning: Internal React error: Expected static flag was missing. Please notify the React team.

 

리액트 프로젝트를 진행하는 중에 이런 에러가 발생했다.

아니 이게 뭐지?! 하면서 구글링을 했더니 나와 같은 문제를 겪은 사람들이 있었다.

내가 작성한 코드 둥에 hook의 규칙을 위반하는 것이 있는 것이라고 한다.

 

 if (!isVisible) return null;

 

 

바로 컴포넌트 내에서 early return 하는 것이 문제가 된다고 하는데, 내 코드 중 이런 것이 있었다.

만약 early return 을 hook까지 호출할 필요가 없지 않나? 라는 생각으로 early return 하는 부분 다음에 hook을 호출 하였던 것이었다.

  if (pending) {
    <>데이터 로딩 중...^^</>;
  }

  if (!diningInfos || diningInfos?.length < 1) {
    return <>데이터 없음!</>;
  }
  
  const { t } = useI18n(); // 이 부분

 

이 부분이 hook의 규칙을 위반하는 것일까 하여, hook을 호출하는 저 부분은 컴포넌트 맨위로 올렸더니 해당 에러는 더 이상 뜨지 않았다.

  const { t } = useI18n(); // early return 위로 이동

  if (pending) {
    <>데이터 로딩 중...^^</>;
  }

  if (!diningInfos || diningInfos?.length < 1) {
    return <>데이터 없음!</>;
  }

 

더 알아보니 리액트 버전 17에서는 이런 방식이 문제가 되지 않았는데, 리액트 버전 18부터 이런 방식이 문제가 되었다고 한다.

정리

• 컴포넌트 내에서 ealry return 을 사용하게 된다면 hook을 early return 하는 부분 위에 작성하도록 하자!

 

참고:

• https://stackoverflow.com/questions/77734858/warning-internal-react-error-expected-static-flag-was-missing-please-notify-t
• https://github.com/facebook/react/issues/24391#issuecomment-1107796997