React useStateの「prev」「...prev」「[key]」の意味と使い方をやさしく解説

はじめに

Reactで地図上にフィルター機能を実装している際に、
state管理の仕組みで少し混乱する部分がありました。

特に、次のようなコードの意味をしっかり理解しておきたいと思い、
この記事で簡潔に整理します。

setFilters(prev => ({
  ...prev,
  [key]: !prev[key]
}));

prevとは

「previous（前の）」の略。
Reactが今のstateを自動で渡してくれます。

...prevとは

Reactでは、今あるデータを直接いじるのはNGです。
だから一度「前のデータをまるごとコピー」して、
そのコピーの中で変えたい部分だけ上書きします。

[key]: !prev[key]とは

[key]は動的なキー指定。
たとえばkey = "wifi"なら、filters.wifiを意味します。
!prev[key]でその値を反転（true ⇄ false）。

組み合わせるとこうなる

const toggleFilters = (key) => {
  setFilters(prev => ({
    ...prev,
    [key]: !prev[key],
  }));
};

クリックしたキーだけON/OFFを切り替えることができます。

まとめ

このコードは、「前のstateをコピーして、指定した項目だけON/OFFを切り替える」
というシンプルな処理です。

prev は前のstate、
...prev はそのコピー、
[key] は更新する項目名、
!prev[key] はその値を反転しています。

Reactでトグルやフィルター機能を作るときの基本パターンをまとめました。