【React Hooks】useStateの実用的な更新関数を作る｜Playground発！アプリ開発会社の技術ブログ

「React Hooksを使い始めてみたけど、useStateをイマイチ使いこなせない」
「カウントアップ用の関数を作ったけどうまくいかない」
「useStateで使えるprevStateって何？」

こんな疑問を持つ方向けの記事です。

こんにちは。
フロントエンドエンジニアの稲垣です。

久しぶりに技術記事を書いてみます。

React Hooksが使えるようになって世の中便利になったものですが、React公式のuseStateのサンプルコードがあまり実用的ではないと思ったので、実用的なコードを書いてみます。

この記事で紹介すること

テキスト入力フォームのためのuseStateの使い方
カウンターを確実に更新するためのuseStateの使い方
ON/OFFを切り替えるためのuseStateの使い方

1 React Hooks｜useStateの実用的な使い方

React Hooks｜useStateの実用的な使い方

useStateの基本的な使い方は、React公式チュートリアルなどを一通りやったことがあれば身についていると思うのでスキップします。

useStateの更新関数の引数を使って更新する

onClickイベントやonChangeイベントから引数を受け取って更新関数に渡すことは、テキストの入力フォームなどで頻繁に使います。

import React, {useState} from 'react';

const TextInput = () => {
  const [name, setName] = useState('')

  const handleName = (event) => {
    setName(event.target.value)
  }

  return (
    <input
      onChange={(event) => handleName(event)}
      type={'text'}
      value={name}
    />
  );
};

export default TextInput;

上記の例では、onChangeイベントの引数であるeventを受け取ってhandleName関数に引数として渡しています。

handleName関数はeventをパラメータとして受け取るよう宣言されており、実際にフォームに入力された値であるevent.target.valueを更新関数に渡すことで、nameのstateが更新されるのです。

useStateを使ってプラスマイナスできるカウンターを作る

React公式ドキュメントでは以下のような例が紹介されている。

import React, { useState } from '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>
  );
}

しかし実はこのコードはあまりよろしくない。

連続でボタンをクリックすると、途中でカウントアップがうまく反応しないタイミングがあるからです。

この理由はsetCountの中で現在のstateであるcountを参照して+1しており、連続でクリックしたタイミングによってはsetCountによるcountの更新が完了しきっておらず、古いcountを参照していることがあるためです。

もしcountUp関数の中で他に重めの処理をしていたら、連続でクリックしてもカウントアップがうまくいかないケースがあります。

これを防ぐために使えるのがprevStateという引数です。

import React, {useState} from 'react';

const Counter = () => {
  const [count, setCount] = useState(0)

  const countUp = () => {
    setCount(prevState => prevState + 1)
  }

  const countDown = () => {
    setCount(prevState => prevState - 1)
  }
  return (
    <div>
      <p>現在のカウント数: {count}</p>
      <button onClick={countUp}>up</button>
      <button onClick={countDown}>down</button>
    </div>
  );
};

export default Counter;

setCount関数の引数として使える特殊なprevStateによって、更新前のstateを確実に参照しながら更新することができます。

useStateを使ってON/OFFを切り替えるボタンを作る

先ほどのカウンターの実装で使ったprevStateの応用編です。

true/falseをuseStateで管理する際に使えるテクニックで、ボタンをクリックするたびにtrue/falseを切り替えます。

import React, {useState} from 'react';

const ToggleButton = () => {
  const [open, setOpen] = useState(false)

  const toggle = () => {
    setOpen(prevState => !prevState)
  }

  return (
    <button onClick={toggle}>
      {open ? 'OPEN': 'CLOSE'}
    </button>
  );
};

export default ToggleButton;

原理は、prevStateで更新前のstateを参照して、その値を反転させる!をつけるというものです。