React Hook useStateを理解する

入門者がReact Hookを学び始めると最初に理解しなければならないHooksのuseStateです。useStateを使うとFunctionコンポーネント内で状態管理を行うことができますが、ClassコンポーネントではReact Hookは利用できません。状態管理と聞くとイメージが湧きにくいですが要はコンポーネントの中で変数を扱うことができる機能です。useStateはコンポーネントの中で変数の値を保持、更新ができることから使用頻度の高い必須な機能なので簡単なサンプルを使って動作確認を行なっていきます。

カウンターを利用した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で実行する関数を外側に定義しても動作は変わりません。このようにuseStateを利用するとFunction内で値を保持したり、更新したりすることができます。

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が切り替わります。Toggleの機能もこのように実装することができます。