ErrorNote] Invalid Hook Call Error

원인 1) Mismatching Versions of React and React DOM

리액트 돔의 버전이 훅을 16.8.0보다 낮을 때 에러가 뜰 수 있습니다.

프로젝트를 어느 정도 진행하다 Invalid Hook Call Error가 뜬다면

보통은 Invalid Hook Call Error가 버전 때문에 나오는 에러는 아니지만

혹시 모르니 package.json에서 한번 확인해보시는게 좋습니다.

원인 2) Breaking the Rules of Hooks

Hooks를 호출 할 때 함수형 컴포넌트의 최상위 부분에서 호출해야 합니다.

총 3가지의 경우가 존재하는데 아래에서 예시를 살펴보겠습니다.

//1. 클래스형 컴포넌트안에서 호출한 경우
class example extends React.Component {
  render() {
    useEffect(() => {})
  }
}

//2. event handler 안에서 호출한 경우
function example() {
  function handleEvent() {
    const err = useContext(...Context);
  }
}

//3. useMemo, useReducer, useEffect에 전달 된 함수 내에서 호출하는 경우
function example() {
  const err = useMemo(() => {
    const err2 = useContext(...Context);
    return ...;
  });
}

위와 같이 Hook을 호출했다면 에러가 발생할 수 있습니다.

하지만 위와 같이 Hook을 호출하지 않았는데 에러가 발생하면 원인 3일 가능성이 매우 높습니다.

원인 3) Duplicate React

이 경우 npm ls react를 통해서 하나 이상의 react가 존재하는지 확인해야 합니다.

만약 하나 이상의 react가 존재하지 않고 원인 1과 원인 2도 해당하지 않는다면

상위 폴더에서 npm ls react를 통해 한번 더 확인하시면 됩니다.