HotReload이슈❗️ Cannot update a component (HotReload) while rendering a different component (Unknown).To locate the bad setState() call inside Unknown, follow the stack trace as described in https://reactjs.org/link/setstate-in-render Error Component Stack

시간에 쫒겨 개발 중 HotReload 에러를 마주했다.
해석을 해보니 무언가 컴포넌트가 렌더링 중에 상태를 업데이트 할 수 없다. 라는 말이다.

const TodoList = ({ data, isDashboard }: TodoListProps) => {

  // queries => todos
  const {todos} = useQueries({
    queries: data?.content
      ? data?.content.map((id: string) => ({
          queryKey: QUERY_KEY.TODO(id),
          queryFn: getTodo,
        }))
      : [],
     combine: (results) => {
     	return: {
          todos: results.map((result) => result.data)
        }
     }
  });

  return (
    <>
    코드생략...
     {todos.map(todo => <TodoItem/>)}
    </>
  );
};
export default TodoList;

실제 코드를 Todo로 살짝 바꿔봤다.
디버깅을 해보니 todos에서 map을 돌렸더니 저 에러가 났다. 
useQueries가 비동기로 동작하다보니 비동기 로드 중에 todos를 렌더링 하려 시도하고 있고 그에 따라 queries가 상태가 계속 변하고 있어 불필요한 렌더링이 계속 발생한것이다.

 

바로 위에 코드처럼 (많은 코드들을 생략했지만) 초기에 쿼리로직과 UI로직을 한 컴포넌트 안에 사용하고 있었다.
그렇다면 어차피 컴포넌트를 분리해야 하는 상황이고 이 에러가 비동기 로드가 다 완료된 후 완전히 데이터가 들어 왔을때 UI를 렌더링 하는게 낫겠다 싶었다.
곧바로 쿼리로직과 UI 로직을 분리했다.

 

const TodoContainer = ({ data, isDashboard }: TodoListProps) => {

  // queries => todo
  const {todos} = useQueries({
    queries: data?.content
      ? data?.content.map((id: string) => ({
          queryKey: QUERY_KEY.TODO(id),
          queryFn: getTodo,
        }))
      : [],
     combine: (results) => {
     	return: {
          todos: results.map((result) => result.data)
        }
     }
  });
  
   if (some(todos, isEmpty)) return null;

  return (
    <TodoList data={todos}/>
  );
};
export default TodoContainer;

 

const TodoList = (data) => {
	...로직 생략

	return <TodoItem/>

}

 

Container/List/Item 순으로 컴포넌트를 분리하고
상위 컴포넌트인 Container에서 queries를 사용했다.
lodash의 some을 사용해 todos에 온전한 값이 들어 올 경우 TodoList를 리턴하도록 했다.

원래 isLoading을 사용하려 했으나 이 당시 뭔가가 잘안됬다..;ㅎㅎ (시간부족!!!)

이렇게 로직을 분리하고 분기처리를 해주니 HotReload에러가 사라졌다.
오히려 이렇게 막개발 하다보니....여러 에러를 마주하게되네....^^ㅠ