React Hooks useStateの使い方

React Hooksとは？

React HooksはReact バージョン16.8から導入された新機能です。

React Hooksを用いることで、stateなどのReactの機能をクラスコンポーネントを実装せず、関数コンポーネントで利用できるようになりました。

Hooksを利用するとコンポーネント間の再利用性が高まったり、コードがシンプルになるというメリットがあるため、今後Reactでは、関数コンポーネント + Hooksで開発を行うのが主流となっていきます。

React Hooks useStateの使い方

React アプリケーションの作成

ターミナルを開いて、任意のディレクトリで以下のコマンドを実行してアプリを新規作成します。

# アプリの作成
npx create-react-app my-app
# アプリの起動
npm start

useStateの使い方①

useStateはReactのstateの機能を関数コンポーネントに追加するHookです。

それでは、以下基本的な使い方を見ていきましょう。

srcディレクトリの配下にコンポーネントを作成します。my-app/src/components/use_state/Component1.js

以下の例では、ボタンをクリックすると1ずつカウントアップされるコンポーネントを作成します。

import React, {useState} from 'react';

// How to use useState
const Component1 = () => {
  const [counter, setCounter] = useState(0);

  const handleClickButton = () => {
    setCounter(counter + 1);
  }

  return (
    <div>
      <button onClick={handleClickButton}>Count Up {counter}</button>
    </div>
  );
};

export default Component1;

import React, {useState} from 'react';

useStateを利用するにuseStateをインポートしています。

const [counter, setCounter] = useState(0);

上記でコンポーネント内でstateを定義しています。

const [stateの変数名, stateを更新する関数] = useState(初期値);

useState()はstateとstateを更新するための関数を返します。また引数には初期値を指定します。

const handleClickButton = () => {
    setCounter(counter + 1);
}

return (
  <div>
    <button onClick={handleClickButton}>Count Up {counter}</button>
  </div>
);

上記のコードでは、ボタンをクリックする際に呼ばれる関数（handleClickButton）を定義して、ボタンのonClick属性に渡しています。handleClickButtonでは、setCounter()でstateを更新するようにしています。

最後にApp.jsを修正して、Component1.jsを表示します。

import './App.css';
import Component1 from './components/use_state/Component1';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Component1 />
      </header>
    </div>
  );
}

export default App;

useStateの使い方②

続いて、stateにオブジェクトをセットする方法を確認します。

以下の例では、nameとageのテキストフィールドに入力した際に入力値の内容をstateにセットするように実装しています。

import React, {useState} from 'react';

// How to use useState (Object)
const Component2 = () => {

  const [user, setUser] = useState({
    name: '',
    age: ''
  });

  return (
    <div>
      <p>name: {user.name} - age: {user.age}</p>
      <input
        type="text"
        value={user.name}
        placeholder="name"
        onChange={(e) => setUser({
          ...user,
          name: e.target.value
        })}
      />
      <input
        type="text"
        value={user.age}
        placeholder="age"
        onChange={(e) => setUser({
          ...user,
          age: e.target.value
        })}
      />
    </div>
  );
};

export default Component2;

import './App.css';
import Component2 from './components/use_state/Component2';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Component2/>
      </header>
    </div>
  );
}

export default App;

useStateの使い方③

続いて、stateに配列をセットする方法を確認します。

以下の例では、テキストフィールドに入力された値を管理するnameと登録されたユーザーを管理するusersの2つのstateを用います。

テキストフィールドに入力をした際にsetName()が実行され、入力値がnameにセットされます。また「Add New User」をクリックするとsetUsers()が実行され、usersにユーザーが追加されます。

usersにはidとnameをもったオブジェクトを配列として格納しています。

import React, {useState} from 'react';

// How to use useState (Array)
const Component3 = () => {
  const [name, setName] = useState('');
  const [users, setUsers] = useState([]);

  const inputName = (name) => {
    setName(name);
  }

  const addUser = () => {
    setUsers([...users, {
      id: users.length,
      name: name
    }])
    setName('');
  }

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => inputName(e.target.value)}
      />
      <button onClick={addUser}>Add New User</button>
      <ul>
        {users.map(user => (
          <li key={user.id}>id: {user.id} - name: {user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default Component3;

import './App.css';
import Component3 from './components/use_state/Component3';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Component3/>
      </header>
    </div>
  );
}

export default App;