react hook의 호출 규칙

react-query로 서버에서 리스트를 get 해오는 로직을 짜다가 데이터를 가져오는 loading 일 때는 초반에 <div>Loading...</div> 를 띄워주려고 했다. 

 

"Uncaught Error: Rendered more hooks than during the previous render."

 

하지만 위와 같은 에러가 발생했다. 

이유를 찾아보니 if (isLoading) return <div>Loading...</div>;  이 부분을 hook보다 상위에 두어서 생긴 문제였다. 

 

리액트에서는 컴포넌트의 렌더링 중 훅의 호출 순서와 횟수가 일관되어야 한다. 

컴포넌트가 처음 렌더링될 때 호출된 훅의 순서와 갯수는 이후 렌더링에서 동일해야한다. = 훅의 호출 규칙

 

처음 코드에서 if (isLoading) 조건에 따라 로딩 상태가 변경될 때 컴포넌트의 리턴 부분이 달라지고, 이는 초기 렌더링과 다른 훅의 호출 순서를 야기할 수 있다. 즉, isLoading 상태에 따라서 일부 훅이 호출되지 않을 수 있으며, 이는 리액트가 기대하는 일관된 훅 호출 순서를 방해할 수 있다는 것..

 

• 로딩 중이 아닐 때: 모든 훅이 호출(useState, useRef, useGetAssistantList, useCurrentAssistantStore, usePostThread, useThreadIdStore, useEffect).
• 로딩 중일 때 (기존 위치에서 if (isLoading)): return <div>Loading...</div>;이 실행되어 그 이후의 훅들이 호출되지 않음

 

if (isLoading)을 컴포넌트 맨 아래로 옮기면, 모든 훅 호출이 로딩 상태와 상관없이 실행되고, 로딩 상태에 따라 렌더링 결과만 달라진다. 이는 리액트의 훅 호출 규칙을 준수하는 것으로, 훅 호출 순서와 갯수가 모든 렌더링에서 일관되게 유지되어 에러가 해결된 것!