React で useState を使用する際のよくある間違い

React プロジェクトでは、useState は、機能コンポーネントの状態を管理するために最も一般的に使用されるフックの 1 つです。ただし、このフックを使用するときに開発者が犯すよくある間違いがいくつかあり、パフォーマンスの問題や予期しないバグにつながる可能性があります。この記事では、useState の使用時によくある 4 つの間違いを取り上げ、それらを回避する方法についてのヒントを提供します。

1. useStateを初期化する関数を使用しない

useState で状態を初期化するとき、初期状態が高価な関数の結果である場合、この関数はレンダリングのたびに呼び出されます。これは、特に関数に複雑な計算が含まれる場合、パフォーマンスに重大な影響を与える可能性があります。

間違った使用法:

const [data, setData] = useState(expensiveFunction());

この例では、expensiveFuncttion がレンダリングのたびに呼び出され、不必要なパフォーマンス コストが発生します。

正しい使い方:

const [data, setData] = useState(() => expensiveFunction());

useState 内の関数を使用すると、高価な関数 は最初のレンダリング中にのみ呼び出され、後続のレンダリングでリソースを節約できます。

2. setState関数の誤用

React で状態を更新するとき、特に新しい状態が以前の状態に依存する場合、setState の関数形式を使用することが重要です。よくある間違いは、以前の値を考慮せずに状態を更新することです。

間違った使用法:

setCount(count + 1);

これにより、複数の更新が連続してトリガーされると問題が発生する可能性があります。カウントには最新の値が含まれていない可能性があるためです。

正しい使い方:

setCount(prevCount => prevCount + 1);

このアプローチにより、状態が以前の値に基づいて更新されることが保証され、信頼性が高まります。

3. useState の不適切な配置

React のフックにはいくつかの厳密なルールがあり、その 1 つは機能コンポーネントのトップレベルでのみ使用できるというものです。ループ、条件、またはネストされた関数内にフックを配置すると、React の状態管理メカニズムが壊れる可能性があります。

間違った使用法:

if (condition) {
  const [value, setValue] = useState(false);
}

これは React のルールに違反します。useState を条件ステートメント内に配置すべきではないためです

正しい使い方:

const [value, setValue] = useState(false);

if (condition) {
  // Use the state here
}

useState を条件やループの外に保持することで、React はフックが呼び出される順序を適切に管理できます。

4.状態を直接変更する

React の状態は不変として扱う必要があります。 状態を直接変更すると、特に オブジェクトまたは配列を扱う場合、予期しないバグや問題が発生する可能性があります。

間違った使用法:

const [user, setUser] = useState({ name: 'John', age: 30 });
user.name = 'Jane';  // Incorrect mutation
setUser(user);       // Incorrect update

React は状態の変化を検出しないため、ユーザーを直接変更しても再レンダリングはトリガーされません。

正しい使い方:

setUser(prevUser => ({
  ...prevUser,
  name: 'Jane'
}));

ここでは、スプレッド演算子を使用して新しいオブジェクトが作成され、状態の不変性が保証され、適切な再レンダリングがトリガーされます。

結論

useState を使用するときによくある間違いを回避すると、React アプリケーションのパフォーマンスと信頼性を大幅に向上させることができます。状態を適切に初期化する場合でも、機能アップデートを使用する場合でも、不変性を確保する場合でも、これらのベスト プラクティスに留意することで、よりクリーンで効率的な React コードを作成できます。

以上がReact で useState を使用する際のよくある間違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。