【React】renderでsetState()すると無限ループになる【React Native】

何が起きたか

render()内でsetState()を実行してしまい無限ループ

Calling setState in render causes infinite loop · Issue #5591 · facebook/react

ありがちなソース

ex) 親Componentから子Componentにmethodとvalueをpropsで渡し、子ComponentのonPressイベントでそのmethodを実行する

BadMain.jsx

_onPress = (value) => {
  this.setState({ count: value })
}

render() {
  return( 
    <SubComponent onPress={_onPress} value={value} />
  );
}

BadSub.jsx

const SubComponent = (props) => {
const { onPress, value } = props

  return (
    <TouchableOpacity onPress={onPress(value)}> 
    ...
    </TouchableOpacity>
  );
}

これをやっちゃうと

<TouchableOpacity onPress={onPress(value)}> 

が

<TouchableOpacity onPress={setState()}> 

と同義になってしまうので、stateの更新=>render=>stateの更新...と無限ルールにハマってしまいます。

どうするか

render外でsetState()を含むmethodを実行する。

GoodMain.jsx

_onPress = (value) => {
  this.setState({ count: value })
}

render() {
  return( 
    <SubComponent onPress={_onPress} value={value} />
  );
}

GoodSub.jsx

const SubComponent = (props) => {
const { onPress, value } = props
const _onSubPress = () => {
  onPress(value);
}

  return (
    <TouchableOpacity onPress={_onSubPress)}> 
    ...
    </TouchableOpacity>
  );
}