React Hook useStateを理解する | アールエフェクト

入門者がReact Hookを学び始めると最初に理解しなければならないHookのuseStateだと思います。useStateを使うとFunction内で状態管理を行うことができます。ClassではReact Hookは利用できません。useStateは変数の値を保持したり、更新したりできることから使用頻度も高いと思うので簡単なサンプルを使って動作確認を行なっていきます。

1 カウンターを利用したuseStateの理解
- 1.1 useStateの設定
- 1.2 countの値の更新
2 useStateでbooleanを使う
- 2.1 前の値を利用して切り替える

カウンターを利用したuseStateの理解

useStateの設定

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


import React, { useState } from 'react';

コンポーネント内で状態管理を行いたい変数を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で実行する関数を外側に定義しても動作は変わりません。


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を使用することができます。

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が切り替わります。