Rendered more hooks than during the previous render.

이 오류가 의미하는 것

React는 함수 컴포넌트를 렌더링할 때 Hook 호출 순서를 기준으로 상태를 연결합니다. 같은 컴포넌트가 다시 렌더링될 때 Hook의 개수나 순서가 달라지면 다음 오류가 표시됩니다.

Rendered more hooks than during the previous render.

React 공식 오류 페이지는 운영 빌드의 축약 오류를 이 문장으로 복원합니다. 이 문구만으로 어떤 Hook이 원인인지는 확정할 수 없으므로 컴포넌트의 모든 렌더링 경로를 비교해야 합니다.

먼저 확인할 항목

1. 브라우저 콘솔과 서버 로그에서 오류가 발생한 컴포넌트 이름과 호출 경로를 기록합니다.
2. 컴포넌트의 if, 삼항식, &&, 반복문 안에 Hook 호출이 있는지 확인합니다.
3. 조건부 return 뒤에 Hook이 남아 있는지 확인합니다.
4. 사용자 정의 Hook이 내부에서 조건부로 다른 Hook을 호출하는지 확인합니다.
5. 개발 모드에서 eslint-plugin-react-hooks의 rules-of-hooks 검사를 실행합니다.

다음 코드는 렌더링 조건에 따라 useEffect가 호출되므로 잘못된 예입니다.

function Profile({ enabled }: { enabled: boolean }) {  if (!enabled) {    return null;  }  useEffect(() => {    loadProfile();  }, []);  return <ProfileView />;}

수정 방법

Hook은 조건부 return보다 위의 컴포넌트 최상위에서 항상 호출하고, 실행 조건은 Hook 내부에서 검사합니다.

function Profile({ enabled }: { enabled: boolean }) {  useEffect(() => {    if (!enabled) {      return;    }    loadProfile();  }, [enabled]);  if (!enabled) {    return null;  }  return <ProfileView />;}

Hook을 이벤트 핸들러, 일반 함수, useMemo·useEffect에 전달한 콜백 내부에서 호출하지 마십시오. 조건별 상태가 필요하면 Hook 자체는 항상 같은 순서로 호출하고 초기값이나 반환 결과를 조건에 따라 선택하십시오.

수정 후 판정

• 같은 컴포넌트를 조건을 바꿔 두 번 이상 렌더링해도 오류가 재현되지 않아야 합니다.
• rules-of-hooks 린트 오류가 없어야 합니다.
• 운영 빌드에서만 축약 오류가 발생했다면 개발 빌드의 전체 오류와 동일한 호출 경로인지 비교합니다.

Hook 호출 위치를 바꾼 뒤에도 오류가 남으면 중복 React 설치 또는 서로 다른 React·React DOM 버전 사용 여부를 별도로 확인해야 합니다. 이 문서는 Hook 호출 순서 오류에 대한 기준만 다루며, 중복 설치 문제를 이 오류의 원인으로 단정하지 않습니다.

주의

운영 환경에서 오류를 숨기기 위해 오류 경계나 suppressHydrationWarning을 먼저 추가하지 마십시오. 변경 전 재현 조건과 린트 결과를 기록하고, 상태 변경이나 의존성 업그레이드는 되돌릴 수 있는 커밋으로 분리하십시오.