React ステートフック useState の使い方

React hook は React 16.8から追加された新機能です。

クラスを書かなくても state などの機能を、関数コンポーネントで使えるようになっています。

初めてステートフックの useState を見たときに理解に苦しみました。

この記事では React hook の useState では

• 何ができるのか
• また、これまでのコードと何が違うのか

具体例を交えながら学習し始めたときの悩みと共にまとめたいと思います。

ステートフックの利用法

まずは公式ドキュメントに書かれている説明の確認。

フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。

https://ja.reactjs.org/docs/hooks-state.html

とのこと。

つまり、これまでは状態管理を行う state はクラスで実装することが必須だったようですが、クラスを用いることなく利用できるようになったとのこと。

具体的に何が違うのかサンプルコードで確認していきます。

クラスで実装されたReactのサンプルコード

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

ReactDOM.render(<Example/>, document.getElementById('root'));

この例は私自身も見慣れたコードで constructor の this.state の部分で状態管理を行っています。

上の例ではボタンをクリックするたび、state の count がプラス１ずつ更新されるコードになっています。

フックを利用したReactのサンプルコード

React 16.8 から新たに導入されたフックを利用した場合次のような実装になります。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

ReactDOM.render(<Example/>, document.getElementById('root'));

これまではクラス内に実装する必要があった state を関数コンポーネント内に書くことができるようになっています。

useState 部分を噛み砕くと次のようになります。

const [状態変数, 状態変更関数] = useState(状態の初期値);

状態変数を呼び出すには this.state.count と書く必要があったものが count と書くだけでOKになったのも大きな変更点ですね。

CDNからReactをインポートしている場合

useState のインポートの仕方が異なる点に注意！！

const { useState, useEffect } = React

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

ReactDOM.render(<Example/>, document.getElementById('root'));

この下に実際のコードを動作させてみたので体験してみてください。

検証