Fix the "Maximum Update Depth Exceeded" Error in React

 

 

https://typeofnan.dev/fix-the-maximum-update-depth-exceeded-error-in-react/

 

state 를 useEffect 안에서 setState 하면 무한렌더링 일어날 수 있다. [] 가 되도록 views 를 의존성 배열에서 제거하자.

function App() {
  const [views, setViews] = useState(0);

  useEffect(() => {
    setViews(views + 1);
  }, [views]);

  return <>Some content</>;
}
  
  
function App() {
  const [views, setViews] = useState(0);

  useEffect(() => {
    setViews((v) => v + 1);
  }, []);

  return <>Some content</>;
}

state 초기화. 초기화는 useState 할 때 넣어주는게 좋다.

const me = useSelector((state: RootState) => state.auth.me);


useEffect(() => {
    setNickname(me?.nickname || '');
    setRegion(me?.region || '');
    setDescription(me?.description || '');
  }, [me?.description, me?.nickname, me?.region]);
==> xxxx 이렇게 넣지 않는게 좋다. 오류가 나진 않았다. me 가 아니라 me.nickname 과 같아서 그런듯하다.  
  
  
const [nickname, setNickname] = useState<string>(me?.nickname || '');
const [region, setRegion] = useState<string>(me?.region || '');
const [description, setDescription] = useState<string>(me?.description || '');
==> oooo 초기화를 넣어줄 것.

me.nickname 이 아니라 이렇게 imagesOrg 자체가 상태값일 때는 무한렌더링 된다.

const imagesOrg = useSelector((state: RootState) =>
    selectImagesByIds(state, imageIds),
  );
  
const [images, setImages] = useState<IImage[]>();
  
useEffect(() => {
	setImages(imagesOrg);
}, [imagesOrg]);
==> 이렇게 하면 무한 렌더링 오류난다.


그냥 useState 할 때 초기값으로 넣어줄 것.
const [images, setImages] = useState<IImage[]>(imagesOrg);