Rendered more hooks than during the previous render

 

문제가 된 코드

const { data, isLoading, isError, error } = useQuery({
    queryFn: () => getData(),
    queryKey: ['options', userId],
    enabled: !!userId,
  });
  
  if(isError) {return <div> error {error.toString()}}
  
  React.useEffect(() => {
    if (data) {
      setOptions(data?.options);
    }
  }, [data]);
  
  return (...)

 

무슨 오류 인가요?

오류 문구를 그대로 해석해보면 "이전 렌더링 중보다 더 많은 hooks를 렌더링했습니다"

같은 컴퍼넌트에서 호출된 hooks 수가 조건에따라 달라지면 안된다를 의미합니다.

 

그렇다면 hooks 란 무엇인가요?

React에서 "hooks"는 컴포넌트의 상태와 생명주기를 함수 컴포넌트 내에서 관리할 수 있도록 하는 함수들을 말합니다.

예를 들면 useState, useEffect, useCallback, useMemo등이 있습니다.

 

오류의 원인은 무엇인가요?

if(condition == 'a') {
	return <div> 'A조건' <div>
}

// hooks 진행
setState(B)

return (
	<div> 'b조건' <div>

 

condition이 'a'라면 setState라는 hooks가 실행이 안되기 때문에

condition의 값에 따라 호출 된 hooks 수가 달라집니다.

이런 경우에 위와 같은 오류가 발생합니다.

 

그럼 어떻게 해결하면 되나요?

간단합니다

상태와 생명주기를 관리하는 hooks 이후에 조건에 따른 return을 해주면 됩니다.

 

예시 코드를 오류 해결하려면 아래와 같이 바꿀 수 있습니다.

 

const { data, isLoading, isError, error } = useQuery({
    queryFn: () => getData(),
    queryKey: ['options', userId],
    enabled: !!userId,
  });
  

  
  React.useEffect(() => {
    if (data) {
      setOptions(data?.options);
    }
  }, [data]);

  if(isError) {return <div> error {error.toString()}}  
  
  return (...)

 

 

참고:

https://velog.io/@sinf/Rendered-more-hooks-than-during-the-previous-render