React런타임
React Too many re-renders — 무한 렌더 루프
Too many re-renders. React limits the number of renders to prevent an infinite loop
한 줄 해결: 렌더 중에 setState 가 호출돼 렌더→상태변경→렌더가 무한 반복되는 것으로, 이벤트 핸들러에 함수를 호출이 아니라 참조로 전달하면 됩니다.
이런 증상일 때
컴포넌트가 마운트되자마자 "Too many re-renders" 로 앱이 멈춥니다. 보통 onClick={handler()} 처럼 핸들러를 즉시 호출했거나, 조건 없이 렌더 본문에서 setState 를 부른 경우입니다.
원인
- onClick={setCount(count+1)} 처럼 JSX 에서 함수를 즉시 호출(렌더마다 실행됨)
- 렌더 본문(컴포넌트 최상단)에서 조건 없이 setState 호출
- useEffect 의존성 배열을 잘못 줘서 effect 가 매 렌더 실행되며 상태를 바꿈
해결 방법
1
핸들러는 참조로 전달
즉시 호출(())을 빼고 함수 참조 또는 화살표 함수로 감쌉니다.
// 잘못: onClick={setCount(count+1)}
onClick={() => setCount(count + 1)}2
setState 는 이벤트/effect 안에서만
렌더 본문에서 직접 setState 를 부르지 말고, 이벤트 핸들러나 useEffect 안에서 호출합니다.
3
useEffect 의존성 점검
effect 안에서 바꾸는 상태를 의존성에 넣으면 루프가 됩니다. 의존성 배열을 올바르게 좁히세요.
useEffect(() => { /* ... */ }, [id]) // 바뀌는 값만 정확히💡 예방: JSX 의 이벤트 핸들러에 ()를 붙이는 순간 호출이 됩니다. 항상 참조나 화살표 함수로 넘기세요.
Reactre-rendersetStateuseEffect무한루프