react native setState呼ばれるタイミング

Question

react native 開発中にさっきまで普通に画面が読み込まれていたのにプログラム書き足してから実行すると真っ白な画面で肝心なcomponentが映し出されない。。。

consoleを見てみるとどうやらrenderメソッドがひたすら呼ばれている。

renderメソッドを確認してみると

 onPress={this.setState({isModalVisible: true})}

このような記述をしていた！ setStateがひたすら呼ばれそれと同時にrenderメソッドが呼ばれていた模様。

 onPress={() =>  {this.setState({isModalVisible: true})}}

これに直したら映るようになった、

しかし、なぜこれでうまくいったのでしょうか。

そもそも何でひたすらsetStateが呼び出されるのでしょうか。

自分は今までonPressに登録した関数は実際にボタンを押された時に実行されると思っていました。

Answer 1

①
renderメソッドはReact Nativeの管理下に置かれています。
我々何もしなくても、ReactNativeが勝手に必要なとき、renderメソッドを呼び出します。
何らかの変化があったら、renderメソッドは呼び出されます。

②
Buttonとかのコンポーネントの仕様書を見る限り
onPress=の後ろはFunctionが来ることになっています。
つまり

onPress={() =>  {this.setState({isModalVisible: true})}}
```が正しいです。
こうすることによって、Buttonが押された時に実行されるべきFunctionをReactNativeに教えます。ReactNativeは約束通りにやることをやります。
```javascript
() =>  {this.setState({isModalVisible: true})}
```イコール
```javascript
function myFunc(){
    this.setState({isModalVisible: true})
}
```ここで、ボタンを押したら実行する関数なので名前がなくてもいいので、()=>{}という形になっています。

では、なぜ
```javascript
onPress={this.setState({isModalVisible: true})}
```がダメなのかと言いますと（私の理解で言語化してみますが）
ここは関数ではなく、評価式です。
{}の中の部分は普通にプログラムの一部として、ReactNativeがrenderメソッドの中に遭遇したら、即実行します。
例えば、<View style={styles.container}>のように
{}の部分は、実際に「**プログラム**」として実行され、実行の結果として具体的なstyleを取って来ることになります。
```javascript
onPress={this.setState({isModalVisible: true})}
```ですと、「押されたら、これを実行してね」になっていないからです。
①で説明したように、上は「評価式で、ただのプログラム」ですから、renderメソッドに入っていて、一回実行されると、何か変化したこと（setStateしたから）になって、またrenderメソッドが実行され、その次も、その次もと無限ループになります。

説明になっているかどうか、自信がありませんが、ご参考になれば幸いです。

Answer 2

（もっと説明うまい人の補完お待ちしてます）
{}の中はレンダリングの時点で実行されちゃうから、ってことだと理解してます。

onPress{hoge()} // これだと関数じゃなくて関数の実行結果を渡しています。
onPress{hoge} // これは関数の呼び出しではないのでセーフ