ReatcのuseStateとは

React
React
この記事は約2分で読めます。

React16.8で追加されたステートフックと呼ばれる機能の一つです。
まず、ReactにはStateという概念があり、Reactコンポーネントが持っている状態のことをStateといいます。
そして、ステートフックであるuseStateを利用して、ReactのStateの機能を簡単にコンポーネントに追加できます。

const [count, setCount] = useState(0);

上記では、state変数countとsetCountが宣言されています。
countはstateを保持し、setCountはcountを更新する関数です。
useState()フックで渡す引数は、stateの初期値であり、上記では0が初期値としてcountに渡されています。

以下のようにsetCount関数によりcountを更新できます。

setCount(count + 1)

簡単な説明は以上で終わりですが、実際に挙動を確認するためにReactアプリを作成し、ブラウザに表示させます。

$ npx create-react-app test && cd test && npm start

React公式ドキュメントで例として掲載されているコードを引用すると(関数名だけ異なる)、以下のとおりです。

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default App;

ブラウザを確認すると、クリックするたびに数字が増えることが分かります。

これはクリックするたびにsetCount(count + 1)が実行され、その結果{count}の数が1ずつ増えているためです。

タイトルとURLをコピーしました