React Hooksの使い方 useState編

はじめに

ReactにはHooksと呼ばれる記述を省略したり、パフォーマンスを改善することができるものがあらかじめ用意されています。

その中で、最も使用されている（Java黒調べ）useStateの使い方を紹介します。

useStateとは

結論、State→データの状態を管理するものです。

例えば、以下のようなコードを書いた場合、

（悪い例）

const TestComponent = () => {
 let count = 0;
 const handleClick = () => {
  count++;
 };
 return (
  <div>
    <button onClick={handleClick}>+</button>
    <div>{count}</div>
  </div>
 );
};

count自体はbuttonをクリックすることで内部的にはプラスされますが、画面上では0のままです。

内部ではカウントアップされるが、画面がレンダリングされないため、画面上カウントアップしたcountは表示されません。

では、useStateを使用してみましょう。

useStateの使い方

（useStateを使用したいい例）

const TestComponent = () => {
 const [count, setCount] = useState(0); // ここで宣言
 const handleClick = () => {
  setCount(count + 1); // ここでカウントアップ
 };
 return (
  <div>
    <button onClick={handleClick}>+</button>
    <div>{count}</div>
  </div>
 );
};

宣言の仕方は以下のようになります。

const [状態変数, 状態変数のセッター] = useState(状態変数の初期値);

状態変数は任意の名前をつけます。

状態変数のセッターはset+状態変数とします。（キャメルケース）

終わりに

useStateはReact Hooksの中では理解がしやすく、使い方も簡単な方だと思います。

今後、他のHooksの説明も追加していきます。