React での setState コールバック

1. なぜコールバック引数が必要なのですか
2. setState() コールバックを使用する場合

一見すると、React コンポーネントの .setState() メソッドは十分に単純に見えます。引数の変更を反映するために、既存の状態を更新します。ただし、多くの人は、.setState() メソッドが別のオプションの引数も受け入れることを知りません。この引数は、状態が更新された直後に実行されるコールバック関数です。

より信頼性の高いコードを作成するには、.setState() コールバック関数の機能とその使用方法を理解する必要があります。

なぜコールバック引数が必要なのですか

ほとんどの React 開発者は、.setState() メソッドが非同期であることを知りません。更新はすぐには行われません。setState() 呼び出しの直後に state の更新された内容を読み取ろうとすると、失敗したり、間違ったデータを読み取ったりする可能性があります。

この問題を解決するために、setState() メソッドは別のオプションの引数、つまりコールバック関数を取ります。コールバック関数で指定されたアクションは、状態が更新された後にのみ実行されます。

setState() コールバックを使用する場合

上で述べたように、setState 呼び出しは非同期です。状態オブジェクトはすぐには更新されません。最新の更新に基づいてチェックまたはその他のアクションを実行する場合は、setState() コールバックを使用することをお勧めします。ただし、このような操作を実行する方法はこれだけではありません。代替案については、後のセクションで説明します。

setState() コールバックは、API の呼び出し、state の内容のチェックによる条件付きエラーのスロー、および state の更新直後に実行する必要のあるその他の操作などのタイプのアクションに役立ちます。setState() コールバックも検証に頻繁に使用されます。

たとえば、<input> を使用して状態を更新する場合は、コールバック関数を使用して、更新された値を確実に読み取ることができます。コールバックがなければ、古いバージョンの状態をチェックしている可能性があります。

コード例：

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      text: ""
    }
  }
  render() {
    return (
    <div>
    	<h1>Hello World</h1>
   		<input type="text" 
         onChange={(e) => this.setState({text: e.target.value}, 
         () => console.log(this.state.text))}></input>
    </div>
    )
  }
}

コールバック関数と render()

懐疑論者は、render() メソッドの本体で更新された状態にアクセスできるのに、なぜ setState() コールバックが必要なのかと尋ねるかもしれません。

違いは、render() メソッドは state が更新されるたびに実行されるのに対し、setState() コールバックは state の特定の値を更新した後にのみ実行されることです。

async 関数の .setState()

非同期関数で .setState() メソッドを呼び出すことができる場合があります。この場合、状態はすぐには更新されません。

this キーワードを使用して state プロパティの値を読み取ると、古い値を取得することになります。一方、コールバック関数は、async タスクが実行されると呼び出されます。

代替手段

React ドキュメントでは、開発者が代わりに componentDidUpdate() ライフサイクルメソッドを使用することを推奨しています。これはクラスコンポーネントでのみ使用できます。

機能コンポーネントの場合、useEffect() は、componentDidUpdate() を含むすべてのライフサイクルフックを効果的に置き換えることができます。依存関係の配列をカスタマイズするだけです。

たとえば、状態に age プロパティがあり、状態が更新されたらその値を確認する場合、useEffect() フックは次のようになります。

useEffect(()=>console.log(`doing something with ${this.state.age}`), [age])