初心者でもわかるReact Hook のuseStateを使い方

Reactの入門者がReact Hookを学び始めた時に最初に理解しなければならないのがuseStateです。useStateを使うとFunctionalコンポーネント(関数コンポーネント)内で状態管理を行うことができます。状態管理と聞くとイメージが湧きにくいですが要はコンポーネントの中で変数を扱うことができる機能です。例えばinput要素に入力した文字をコンポーネント内で保持したい場合にuseStateを利用することができます。

useStateはコンポーネントの中で変数の値を保持、更新ができることから使用頻度の高い機能なので簡単なサンプルを使って動作確認を行なっていきます。

シンプルな例を通してuseStateの理解

useStateの設定

useStateを利用するためには、useStateをimportする必要があります。

import React, { useState } from 'react';

コンポーネント内で状態管理を行いたい変数をuseStateを使って宣言します。最初は書式が違和感のある人も多いかと思いますが使えばすぐになれるものです。まず最初は下記のuseStateの書式をしっかりと覚えてください。下記の記述例の場合はcountが変数でsetCountメソッドを使ってcountの値を変更することができます。useStateの()で設定している0がcount変数の初期値です。

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

上記の設定を行うだけでコンポーネント内に{ count }を追加するとcountの現在値を表示することができます。初期値は0に設定し、そこから何も変更を行っていないためブラウザ上には現在値である0が表示されます。

import React, { useState } from 'react';

function Count() {

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

    return (
        <div>
            <h1>Counter</h1>
            <h2>カウント: { count }</h2>
        </div>
  );
}

export default Count;

countの値の更新

先程setCountメソッドでcountの値を更新できると説明しました。どのように変更するのか実際にコードを使って確認していきます。

クリックしたらcountの値が更新できるようにボタンを追加し、onClickイベントを追加します。onClickの中でsetCountメソッドを使ってcountの値を更新します。

<button onClick={() => setCount(count + 1)}>+</button>

countを1増やすだけではなく-1に減らすボタンも追加します。

import React, { useState } from 'react';

function Count() {

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

  return (
      <div>
          <h1>Counter</h1>
          <h2>カウント: { count }</h2>
          <button onClick={() => setCount(count + 1)}>+</button>
          <button onClick={() => setCount(count - 1)}>-</button>
      </div>
  );
}

export default Count;

+ボタンをクリックすると1増え、-ボタンをクリックすると1減るカウンターが作成できました。ボタンを押すとコンポーネントの内で行ったカウントの増減が即座にブラウザ上にも反映されます。

onClickで実行する関数を外側に定義しても動作は変わりません。このようにuseStateを利用するとFunctionalコンポーネント内で値を保持したり、更新したりすることができます。

import React, { useState } from 'react';

function Count() {

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

    const increment = () => setCount(count + 1)
    const decrement = () => setCount(count - 1)

    return (
        <div>
            <h1>Counter</h1>
            <h2>カウント: { count }</h2>
            <button onClick={increment}>+</button>
            <button onClick={decrement}>-</button>
        </div>
  );
}

export default Count;

useStateでbooleanを使う

状態管理を行う変数の値にbooleanを使用することができます。booleanのtrueとfalseを利用することでコンポーネントの表示・非表示を切り替える方法はReactアプリケーションのさまざまな場所で利用されています。

ONボタンとOFFボタンで電源が切り替わるPowerコンポーネントを作成します。

import React, { useState } from 'react';

function Power() {

    const [power, setPower] = useState(false);

    return (
        <div>
            <h1>電源 { power ? 'ON' : 'OFF'} </h1>
            <button onClick={() => setPower(true)}>ON</button>
            <button onClick={() => setPower(false)}>OFF</button>
        </div>
  );
}

export default Power;

useStateで初期値をtrueまたはfalseに設定することができます。上記ではuseStateでfalseに設定しているのでpowerの初期値はfalseになります。

ONボタンとOFFボタンを用意しonClickイベントを使ってpowerの値をtrueまたはfalseに変更できるように設定します。

ブラウザで確認すると下記のように表示され、ONボタンを押すと電源ONと表示され、OFFボタンを押すと電源OFFと表示されます。

前の値を利用して切り替える

ONとOFFを切り替えるのに2つのボタンを用意していましたが、useStateでは現在の値を元にして新しい値を設定することができます。現在の値を利用したい場合には関数を利用します。prevStateがボタンをクリックする前の値でボタンをクリックするとprevStateの値で別の値に変わります。つまり現在の値がtrueであればfalse、falseであればtrueに変わります。

<button onClick={() => setPower(prevState => !prevState)}>ON/OFF</button>

prevStateとしていますが、名前は任意なのでどのような名前をつけることが可能です。

ボタンをクリックするたびにONとOFFが切り替わります。コンポーネントの表示・非表示を行うToggle機能もこのようにuseStateの値を利用して実装することができます。

ここまでの説明が理解できればuseStateを使いこなすことが可能です。