●目次
Reactで状態（state）を管理する際、以前の状態に基づいて新しい状態を設定したいケースがよくあります。
そこで便利なのがprevStateです。
prevStateとは？
prevStateとは、「前の状態（previous state）」を指し、特に状態更新が非同期で行われるReactの内部処理で、正確な状態を保ちながら新しい状態を設定するために役立つ概念です。
状態を直接変更するのではなく、現在の状態から新しい状態を導く形で使用されるため、prevStateを使うことで複数回の更新があっても安定した動作を期待できます。
prevStateを使う場面と利点
prevStateを使う場面
- カウンターやトグル機能など、複数回状態が変更される操作
- 非同期の状態変更で、前の状態が正確に必要な場合
- 状態が連続して変わる場面で、最後の結果が意図したものになっていない可能性を防ぐ
prevStateを使う利点
prevStateを使うことで、次の利点が得られます。
- 状態の競合を防ぐ
非同期処理であっても、正しい前の状態を参照するため、複数の状態更新が競合することがありません。 - 読みやすいコード
状態を直接更新するのではなく、prevStateを引数にした関数として表現することで、状態管理がより明確になります。
prevStateを使ったカウンターの例
具体的な例として、カウンターコンポーネントを作成してみましょう。
このコンポーネントでは、setCount関数で状態を更新する際にprevStateを使い、ボタンがクリックされるたびにカウントが増加するようにします。
prevStateを使っていない場合
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;prevStateを使っている場合
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;- 状態の初期化
useState(0)を使って、countの初期状態を0に設定します。 - increment関数
increment関数内でsetCountを呼び出し、引数としてprevStateを受け取っています。prevStateは前の状態を示しているため、prevState + 1を計算することで現在のカウントに1を加えた新しい状態を設定します。 - ボタンのクリックで状態が更新
<button>タグにonClickイベントを設定し、ボタンをクリックするとincrement関数が呼び出され、countが1ずつ増加します。
prevState注意点
prevStateを使う場合、以下の点に注意してください：
prevStateは必ず関数内で使用する
状態更新を行う関数（例：setCount）の引数としてprevStateを指定する必要があります。- 配列やオブジェクトを扱う場合は浅いコピーを作成する
配列やオブジェクトで状態を更新する場合、元の状態の浅いコピーを作成してから更新することを推奨します。
まとめ
ReactのprevStateは、特に状態が連続的に変わるケースや非同期処理が関わる場面での安定した状態管理に便利な機能です。正しい状態を維持しつつ、新しい状態を確実に反映できるようになるため、複雑なアプリケーション開発において非常に有用です。
今回紹介したカウンターの例を通じて、ぜひprevStateを活用した状態管理に慣れていきましょう！