[ React ] Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

React에서 훅(Hooks) 을 사용하는 컴포넌트가 렌더링 흐름 중에 조건문 등으로 인해 일부 훅이 실행되지 않았을 때 발생.

주요 원인

1. 훅이 조건문 안에 들어가 있는 경우

• if, else, switch, while, for, 삼항연산자(? : ), 논리연산자(&&) 등
  → 훅이 실행될 수도 있고, 안 될 수도 있기 때문에 순서가 꼬임

if (someCondition) {
  const [x, setX] = useState(0); // ❌ 에러 발생
}

2. 조기 return 이후 훅 사용

if (!data) return null;
const [value, setValue] = useState(); // ❌ 실행되지 않을 수 있음

3. useX() 형태의 커스텀 훅 내부에 조건문이 있을 경우

function useSomething(enabled: boolean) {
  if (!enabled) return;

  const [val, setVal] = useState(0); // ❌ 조건문 안에 있음
}

---

나의 경우 조기 return 이후 훅 사용이었음.

에러

const { data, isLoading } = useGetServeralCategories({ limit: 20, offset: 0 });
const { ref, inView } = useInView();

if (isLoading) return <LoadingSpinner />;

useEffect(() => {}, []); // 에러 발생

수정

const { data, isLoading } = useGetServeralCategories({ limit: 20, offset: 0 });
const { ref, inView } = useInView();

useEffect(() => {}, []);

if (isLoading) return <LoadingSpinner />;