React で状態を管理する場合、パフォーマンスとユーザー エクスペリエンスという 2 つの重要な点を考慮する必要があります。

状態更新メソッド

状態を更新する場合、次のメソッドを使用できます:

setCount(count   1);

ただし、この方法は適切に見えるかもしれませんが、非同期更新中に以前の状態値にアクセスするときに問題が発生する可能性があります。

2. prevState による状態更新

新しい状態が以前の状態に基づいて計算される場合、潜在的な問題を回避するために prevState を使用することが不可欠です。

例：

setCount(prevCount => prevCount   1);

3. 配列とオブジェクトの更新

配列とオブジェクトを更新するときは、prevState も使用します。 ただし、React が状態が変更されたことを認識し、再レンダリングをトリガーするには、新しいオブジェクトを作成するにはスプレッド演算子。

配列の更新例:

const [items, setItems] = useState([]);

setItems(prevItems => [...prevItems, item]);

オブジェクトを更新する例:

const [user, setUser] = useState({ name: 'John', age: 0 });

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

結論

状態の更新に使用するメソッドは、コードのパフォーマンスに影響を与える可能性があります。この記事では、効率的な状態管理を確保するための正しい状態更新方法を検討しました。