【React】useStateを使ったReactの状態管理

1. useStateを使ったReactの状態管理

Reactでは、useStateを使うことで関数コンポーネントでstateを変更する自動的に再レンダリングされるように制御することができます。

2. useStateの定義

useStateは関数コンポーネント内で下記のように定義します。useStateの括弧内には初期値を設定さることができます。

const [state, setState] = useState(0);

3. stateを設定して自動的に再レンダリングされるようにする

下記の例はstateを画面に表示させる方法です。画面に「0」と表示されるでしょう。 次はstateを変更して

import React, { useState } from 'react';

function stateSample() {
  const [state, setState] = useState(0);

  return (
    <div>
      <p>{state}</p>
    </div>
  );
}

4. useStateでstateを変更する。

useStateでは、直接stateを変更することはできません。useStateの定義で作成したsetStateを使用します。下記の例では、setStateを利用してカウントアップしています。

import React, { useState } from 'react';

function stateSample() {
  const [state, setState] = useState(0);

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState(state + 1)}>
        ボタン
      </button> </div>

  );
}