React useState

React 16.8 で追加された新機能です。 クラスを書かなくても、 state などのReactの機能を、関数コンポーネントでシンプルに扱えるようになりました。 useState()は、関数コンポーネントでstateを管理（ state の保持と更新）するためのReactフックであり、最も利用されるフックです。 stateとはコンポーネントが内部で保持する「状態」のことで、画面上に表示されるデータ等、アプリケーションが保持している状態を指しています。stateは props と違い後から変更することができます。 クラスコンポーネントと関数コンポーネントにおける「状態」の扱い方の違いを確認してみます。 ちなみにstyles.cssの中身はこれだけ。 こんなカウンターが出来ました。 hooks の useState を使ってクラスコンポーネントから関数コンポーネントに書き換えてみます。 関数コンポーネントの基本形は以下の通り。 useStateの基本形 useState の左辺の state 変数には任意の名前を付けることが出来ます。 （分割代入構文をイメージすると理解しやすいです。） クラスで書いた場合と、同じ結果になりました 再レンダリング後も React はその変数の現在の state の値をそのまま持っており 、最新の state の値を関数に渡します。現在の state の値を更新したい場合は、 setState を呼びます。 次回は useEffect について書きたいと思います。 useState関連のQiita記事書きました React公式チュートリアルのクラスコンポーネントを関数コンポーネントに書き替える