[React JS] Error : Maximum update depth exceeded...

 

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

 

 

onclick 으로 함수 호출 시 매개변수를 사용할 때 잘못 불러오면 위와 같은 에러가 생긴다.

onClickBtn = (var) => {
    // contents...
}

// render()
<button onClick={ this.onClickBtn('var') }>BUTTON</button>

 

함수 호출과 렌더링이 반복되는 구조이기 때문에 생기는 에러인데,

 

아래와 같이 수정해주면 해결된다.

onClickBtn = (var) => {
    // contents...
}

// render()
<button onClick={ () => this.onClickBtn('var') }>BUTTON</button>

 

혹은 호출하는 함수를 아래와 같이 수정해도 된다.

 

onClickBtn = (var) => () => {
    // contents...
}

// render()
<button onClick={ this.onClickBtn('var') }>BUTTON</button>