[에러] Too many re-renders. React limits the number of renders to prevent an infinite loop.

1. 어떤 에러인가?

리액트 무한루프 렌더링.

props로 전달받은 변수를 setState에 넣을 때 무한루프가 걸려서 나오는 에러이다.

 

2. 에러 핸들링 방법

useEffect를 사용하여 sideEffect로부터 보호한다.

 

<에러 난 코드(예시)>

import React, {useState, useEffect} from 'react';
import {useRoute} from '@react-navigation/native';

export const Test = () => {
	const route = useRoute();
    const [isVisible, setIsVisible] = useState(true);
    
    if(route.params !== undefined) {
    	setIsVisible(route.params?.isVisible);
    }
    
    ...
}

 

<에러 해결 코드(예시)>

import React, {useState, useEffect} from 'react';
import {useRoute} from '@react-navigation/native';

export const Test = () => {
	const route = useRoute();
    const [isVisible, setIsVisible] = useState(true);
    
    useEffect(() => {
    	if(route.params !== undefined) {
    		setIsVisible(route.params?.isVisible);
    	}
    }, [route.params]);
    
    ...
}

 

3. 에러 이유

다음은 리액트의 렌더링 조건이다.

 

1. state 변경이 있을 때

2. 부모 컴포넌트가 렌더링 될 때

3. 새로운 props가 들어올 때

4. shouldComponentUpdate에서 true가 반환될 때

5. forceUpdate가 실행될 때

 

React의 useState 렌더링은 비동기로 이루어진다.

때문에 개발자의 예측대로 렌더링이 되지 않고 꼬여버린다.