ReactのprevStateとは？使い方をわかりやすく解説【基本】

●目次

Reactで状態（state）を管理する際、以前の状態に基づいて新しい状態を設定したいケースがよくあります。そこで便利なのがprevStateです。

`prevState`とは？

prevStateとは、「前の状態（previous state）」を指し、特に状態更新が非同期で行われるReactの内部処理で、正確な状態を保ちながら新しい状態を設定するために役立つ概念です。

状態を直接変更するのではなく、現在の状態から新しい状態を導く形で使用されるため、prevStateを使うことで複数回の更新があっても安定した動作を期待できます。

`prevState`を使う場面と利点

prevStateを使う場面

カウンターやトグル機能など、複数回状態が変更される操作
非同期の状態変更で、前の状態が正確に必要な場合
状態が連続して変わる場面で、最後の結果が意図したものになっていない可能性を防ぐ

prevStateを使う利点

状態の競合を防ぐ
- 非同期処理であっても、正しい前の状態を参照するため、複数の状態更新が競合することがありません。
読みやすいコード
- 状態を直接更新するのではなく、prevStateを引数にした関数として表現することで、状態管理がより明確になります。

`prevState`を使ったカウンターの例

具体的な例として、カウンターコンポーネントを作成してみましょう。

このコンポーネントでは、setCount関数で状態を更新する際にprevStateを使い、ボタンがクリックされるたびにカウントが増加するようにします。

prevStateを使っていない場合

setCount(count + 1)
- 現在の count に 1 を足して更新

問題点：状態の更新が非同期で行われるため、複数の状態変更が連続して起きたときに古いcountを参照してしまう可能性がある（例：連打や非同期イベント）

JS

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={increment}>増加</button>
    </div>
  );
}

export default Counter;

useState(0)
- countの初期値を「0」に設定
increment関数
- increment関数内でsetCountを呼び出し、引数としてprevStateを受け取っています。
ボタンのクリックで状態が更新
- <button>タグにonClickイベントを設定し、ボタンをクリックするとincrement関数が呼び出され、countが1ずつ増加します。

prevStateを使っている場合

prevState => prevState + 1
- setCount に関数を渡す形にすることで、Reactが最新の状態値（前の状態）を自動的に渡してくれる

JS

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(prevState => prevState + 1);
  };

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={increment}>増加</button>
    </div>
  );
}

export default Counter;

コード比較

JS（コード比較）

// prevStateを使っていない場合

setCount(count + 1);



// prevStateを使っている場合

setCount(prevState => prevState + 1);

prevState注意点

prevStateは必ず関数内で使用する
- 状態更新を行う関数（例：setCount）の引数としてprevStateを指定する必要があります。
配列やオブジェクトを扱う場合は浅いコピーを作成する
- 配列やオブジェクトで状態を更新する場合、元の状態の浅いコピーを作成してから更新することを推奨します。

まとめ

ReactのprevStateは、特に状態が連続的に変わるケースや非同期処理が関わる場面での安定した状態管理に便利な機能です。

正しい状態を維持しつつ、新しい状態を確実に反映できるようになるため、複雑なアプリケーション開発において非常に有用です。

今回紹介したカウンターの例を通じて、ぜひprevStateを活用した状態管理に慣れていきましょう！