目录
概論
React.jsは現代のウェブ開発において重要な役割を果たしています。特に、コンポーネント内での状態管理に対する独自のアプローチが特徴です。よく使用されるフックの一つであるuseStateは基本的でありながら、しばしば誤用されています。このような一般的な間違いを理解し、避けることは、効率的でバグのないアプリケーションを作成しようとする初心者と経験豊富な開発者の両方にとって重要です。
このブログでは、ReactのuseStateを使用する際に避けるべき4つの重大な間違いについて深く掘り下げていきます。一緒にReactのスキルを高めましょう！
前の状態を考慮することを忘れる
ReactのuseStateフックを使用する際、最新の状態を更新するときにそれを考慮に入れないのは一般的な間違いです。この見落としは、特に迅速な状態更新や複数の状態更新を扱っている場合に、予期せぬ挙動を引き起こすことがあります。
この問題を具体的なアプリケーションのシーンを通じて説明しましょう。
オンライン投票アプリケーションを想像してみてください。ユーザーは、好きな候補者に投票するためのボタンをクリックすることができます。特に盛り上がる瞬間には、多くのユーザーがほぼ同時に投票ボタンをクリックするかもしれません。その時、バックエンドサーバーはこれらの投票を処理するのに少し遅延する可能性がありますが、フロントエンドのReactアプリケーションは票数を表示する状態を素早く更新しようと試みます。
このようなシーンでは、もしユーザーが投票ボタンを連続して速やかにクリックした場合、Reactコンポーネント内の投票処理関数が連続して呼び出されることがあります。
import React, { useState } from 'react';
const CounterComponent = () => {
const [counter, setCounter] = useState(0);
const incrementCounter = () => {
setCounter(counter + 1);
};
return (
<div>
<p>Counter: {counter}</p>
<button onClick={incrementCounter}>Increment</button>
</div>
);
};
export default CounterComponent;
イシュー
Reactが状態更新をバッチ処理する可能性があるため、連続して setVotes(votes + 1) を呼び出すと、以下のような問題が発生する可能性があります：
- ボタンを初めてクリックすると、votesが0から1に変わります。
- ユーザーが迅速にもう一度ボタンをクリックしますが、Reactが最初の状態更新をまだ処理していないため、この時点でのvotesはまだ0です。結果として、もう一度1を加えても、依然として1です。
- このような状況が連続して発生すると、実際のクリックが無視され、票数が正しく増加しない可能性があります。
この具体的なアプリケーションシーンでは、ユーザーはクリックごとに票数が正確に増加することを期待していますが、状態の更新が非同期であり、Reactがこれらの更新をバッチ処理する可能性があるため、実際の票数がすべてのクリック操作を正確に反映していない可能性があります。
このシーンは、前の状態の値に基づいて状態を更新する際には、アプリケーションの反応がユーザーのインタラクションを正確に反映するように、状態更新を慎重に扱う必要があることを強調しています。
ソリューション
前の状態に基づいて状態を更新する際のベストプラクティスは、関数的更新を使用することです。関数的更新を使用することで、直接に前の状態にアクセスし、複数の状態更新が一緒にバッチ処理されても、最新の状態値で作業していることを保証できます。
const incrementCounter = () => {
setCounter((prevCounter) => prevCounter + 1);
};
prevCounterは、更新関数が実行される時点でのcounter状態の現在値を表すパラメータです。これは固定された値ではなく、更新関数が呼び出されるたびにReactによって提供される最新の状態値です。つまり、Reactがこの関数を実行するときはいつでも、prevCounterはその瞬間におけるcounterの最新の値になります。
この改善されたバージョンでは、新しい値を直接 setCounter に渡すのではなく、関数を渡します。この関数は prevCounter を引数として受け取り、prevCounter + 1 を返します。Reactは、この関数が更新を実行する際に受け取る prevCounter が、その時点での counter の最新の値であることを保証します。これは、複数の setCounter がバッチ処理された場合でも、各更新が最新の状態値に基づいて行われるため、状態更新の非一致を避けることができます。
要するに、関数的更新方法を使用することで、Reactは状態更新がいつ実行されても、それが最も正確で最新の状態値に基づいていることを保証できます。これにより、状態のバッチ更新による問題が解決され、特に迅速な連続状態変化に関連する場合に、状態更新がより信頼性の高いものになります。
状態の不変性の無視
Reactでは、状態（state）は不変と見なすべきです。これは、状態オブジェクトを直接変更するのではなく、新しい状態オブジェクトを作成して状態を設定する関数に渡すべきだということを意味します。
例えば、ユーザーのプロフィールページがあり、ユーザーの名前と年齢を表示し、ユーザーがボタンをクリックすることで自分の年齢を更新できるとします。ユーザーは「更新年齢」ボタンをクリックした後、ページ上に表示されている年齢が即座に更新されることを期待しています。
import React, { useState } from 'react';
const ProfileComponent = () => {
const [profile, setProfile] = useState({ name: 'John', age: 30 });
const updateAge = () => {
profile.age = 31;
setProfile(profile);
};
return (
<div>
<p>Name: {profile.name}</p>
<p>Age: {profile.age}</p>
<button onClick={updateAge}>Update Age</button>
</div>
);
};
export default ProfileComponent;
このコードの間違いは、状態オブジェクトprofileの属性ageを直接変更したことです。これはReactでよくある間違いで、特にオブジェクトや配列などの複雑なデータ構造を扱う場合に発生します。
エラーの原因
- 状態の不変性の違反：Reactでは、状態（例えば profile.age = 31 のように）を直接変更すると、状態の不変性の原則に違反します。Reactの状態更新メカニズムは、コンポーネントを再レンダリングするタイミングを決定するために不変性に依存しています。状態オブジェクトを直接変更すると、オブジェクトの参照が変わらないため、Reactはデータの変更を検出できません。
- 再レンダリングがトリガされない：profileオブジェクトの参照が変わらない（オブジェクト内のage属性のみが変更された）ため、Reactは状態が更新されたと認識せず、結果としてコンポーネントの再レンダリングがトリガされません。これにより、画面に表示される内容と実際の状態が一致しなくなる可能性があります。
ソリューション
なぜ修正が必要なのか：
元のコードでは、状態オブジェクトが直接変更されており、Reactの状態不変性の原則に違反しており、コンポーネントが正確に再レンダリングされない可能性があります。Reactのベストプラクティスに従い、アプリケーションのパフォーマンスと予測可能性を確保するために、コードを修正する必要があります。
const updateAge = () => {
setProfile({...profile, age: 31});
};
なぜこのような変更が正しいのか：
-
状態の不変性を保持する：Reactでは、状態は不変と見なされるべきです。これは、状態を直接変更するのではなく、新しい状態オブジェクトを作成すべきだということを意味します。このコードでは、スプレッド演算子（
...）を使用して新しいprofileオブジェクトを作成し、元の状態の不変性を保持しています。 - コンポーネントの正確なレンダリングを確保する：Reactは、現在の状態と新しい状態を比較することで、コンポーネントを再レンダリングする必要があるかどうかを決定します。新しい状態オブジェクトを作成することで、Reactは状態が変更されたことを認識し、コンポーネントの再レンダリングをトリガします。
どのような箇所を修正したのか：
-
スプレッド演算子を使用して新しいオブジェクトを作成する：
updateAge関数内で、profileオブジェクトを直接変更するのではなく、スプレッド演算子（...profile）を使用して既存のprofileオブジェクトのすべての属性をコピーします。 -
特定の属性を更新する：新しいオブジェクトを作成する際に、変更が必要な属性（このケースでは
age）を更新します。これにより、他の属性（例えばname）の不変性も保持しつつ、ageの新しい値を提供できます。 -
setProfileを使用して新しい状態を設定する：元の状態を直接変更するのではなく、setProfile関数を使用して新しいオブジェクト全体を新しい状態として渡します。
これらの変更により、コードは状態の不変性を保証し、Reactが状態の変更を認識してコンポーネントを正しく再レンダリングできるようにし、アプリケーションの挙動をより予測可能で信頼性の高いものにします。