useStateの配列をfilterを用いて更新する方法

はじめに

以前の記事でuseStateで配列を更新する際にmapを用いた例を記載していました。

useStateで配列を扱う備忘録 - おーみんブログ

その方法でも問題なく動きはするのですが、filterを用いたほうがより分岐も少なく、可読性が上がりそうだったのでそちらの処理を備忘録として残します。

サンプルコード

スプレッド構文とfilter関数を用いて以下のような処理を書きます。

// 値を定義
const [value, setValue] = useState([])

// オブジェクト型の配列と仮定しています
// filter関数で更新対象の配列を排除し、新たに値を挿入します。
setValue([
    ...value.filter((v) => v.Id !== something.Id),
    something
]);

おわりに

こちらのほうがmapを使った際よりも分岐がなく、パッと見た時の可読性は上がるのかな？と思い、残してみました。 個人的にはこちらの方が分かりやすいです。