はじめに

備忘録がてら、Reactの基礎であるuseStateについて書いていきます。

useStateとは

useStateは、Reactフレームワークで提供されるフック（Hook）の一つです。useStateフックを使うことで、Reactコンポーネント内で状態（state）を管理することができます。

状態（state）は、コンポーネントが持つデータのことであり、コンポーネント内の変数のようなものです。状態の値が変化すると、Reactは自動的にコンポーネントを再レンダリングしてUIを更新します。

サンプルコード

このコードで解説していきます。

解説

まずは、以下のコードでuseStateを定義します。

[]内のcountはこの関数の中で使われる変数のようなイメージです。
[]内のsetCountはcountの状態を変化させるための関数です。
useState(0)は、[]内のcountの初期値を設定しています。

この関数で、[]内のsetCount関数を呼び出して、count変数を変化させています。
そして、以下のコードでボタンを押した時に、countUp()を呼び出しています。

以上のコードで、ボタンを押すたびに、画面が再レンダリングされ、{count}の変数が1ずつカウントアップしていくはずです。

最後に

他にも記事を書いているので、よければご覧ください。

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/265c676d17fe21e75242

https://qiita.com/hukuryo/items/269457fe06dbba466d3a
[cv:issue_marketplace_engineer]