Maximum update depth exceeded errorの原因と対処法

Reactで開発をしていた際、Maximum update depth exceeded errorが発生したので原因と対処方をまとめておきます。

 

原因

Componentのrenderメソッドの中で、setStateを呼び出していたことが原因。

ReactではsetStateを呼ぶとViewを更新するためにrenderメソッドが呼ばれる。そのため、setState => renderの呼び出し => 再びsetStateの呼び出し => 以下繰り返しとなり、無限ループとなる可能性がある。

これを避けるためにReactではrender中のsetStateを検知し、エラーとするようになっている。

 

対処法

render内のsetStateを削除する。

自分の場合、以下のようにonClickでsetStateを呼び出してしまっていた。

someparams = some-processes;

return (

    <button onClick={this.setState(someparams)}></button>

);

ここでは、onClick時にsetStateを呼び出すべきなので、以下のようにonClick時に呼び出すべき関数を定義するのが正しい。

someparams = some-processes;

return (

    <button onClick={someparams => this.setState(someparams)}></button>

);