[TIL] Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Facts

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. 에러 해결

Feelings

soso

Findings

export default function DressRoomContainer() {
  const dispatch = useDispatch();

  const loginedUser = JSON.parse(localStorage.getItem('userInfo')).username;

  dispatch(setUserName(loginedUser));

  const { userName } = useSelector(state => state.clothesSlice);

  return (
    <DressRoomPage
      userName={userName}
    />
  );
}

다른 컴포넌트에서 userName state를 바꿨더니 위의 코드에서 에러가 발생

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

 

아래 코드와 같이 useEffect로 바꿔주니까 해결

export default function DressRoomContainer() {
  const dispatch = useDispatch();

  const loginedUser = JSON.parse(localStorage.getItem('userInfo')).username;

  useEffect(() => {
    dispatch(setUserName(loginedUser));
  }, []);

  const { userName } = useSelector(state => state.clothesSlice);

  return (
    <DressRoomPage
      userName={userName}
    />
  );
}

 

Future Action Plans

프로젝트 마무리