[리액트 에러] react-dom.development.js:16317 Uncaught Error: Too many re-renders. Re

문제의 에러

react-dom.development.js:16317 Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

문제의 코드

const MoviesCard = () => {
  const [alert, setAlert] = useState("");

  const navigate = useNavigate();
  const searchDate = useSelector((state: SearchDateType) => {
    const results = state.sortBySearch.data.results;
   
    // results가 undefined가 아닐 때 results.length < 1 를 비교한다.
    if(results&&results[0]===undefined){setAlert("The information you are looking for does not exist. I'm sorry.")}
    return results;
  });

 

문제의 원인

- 내가 작성한 위 코드에서 치명적인 문제는 searchDate 라는 변수가 useSelector로 가져온 데이터를 저장하는 전역변수라는 것이다. 즉, searchDate 라는 변수의 값이 계속 바뀔 때 마다 아래 코드를 계속 실행하므로 무한 루프가 걸리는 것이다.

if(results&&results[0]===undefined){setAlert("The information you are looking for does not exist. I'm sorry.")}

- 즉, 리액트의 렌더링 방식에 대한 이해부족으로 인해 생겨난 문제였던 것이다.
 
 

문제의 해결방법

- 문제의 해결방법은 간단하다. 특정 순간에 마운트 될 때 만 앞서 코드가 실행될 수 있도록 useEffect 훅과 의존성 배열을 사용하는 것이다.

  useEffect(()=>{
    if(searchDate.length<1)
      setAlert("The information you are looking for does not exist. I'm sorry.")
  },[searchDate.length])

- 이렇게 되면, if  문은 serachDate.length 가 변동 될 때 조건문 내의 비교를 실행 하게 됨으로써 무한 루프에서 벗어날 수 있다.