setSateの理解の重要性
- stateを更新すると再レンダリングが走る
- 再レンダリングが走ると、マウント、update(ライフサイクル)が走る
- useEffect内の処理が走るためその中にデータ取得の処理があればロジックの理解に大切
setState
- 丁寧な書き方
setStateは setState(updater[, callback])
となっている
丁寧に書くと下記の様になる見たい
## 簡略化 setState({counter: counter += 1}) ## 丁寧な書き方 this.setState((state, props) => { return {counter: state.counter + props.step}; });
- 非同期
setStateは非同期処理っぽいので setStateで値を更新してすぐにstateを利用すると値がセットされないことがある 実際に自分でも体験したのは下記
badの方法でAPIリクエストしたら valが渡されいなかった。 おそらくstate更新の非同期処理のせいなんだと思う
### bad const updateValue = (val: number) => { setValue({value: val}) ## apiを実行する関数です updateValue(value) } ### good const updateValue = (val: number) => { setValue({value: val}) ## apiを実行する関数です updateValue(val) }
補足情報
- ライフサイクル