はじめに

今回はuseStateで配列を更新する方法について紹介していきます。（個人開発の備忘録も兼ねているので、何か気づいたことがあれば教えていただけると嬉しいです。）

useStateで配列要素の更新を行う場合、pushなどを使用すると再描画が走りません。理由についてはこちらに詳しく解説がありました。

Reactではstateの値が変化した時にコンポーネントが再描画されます。

stateの値の変化を、Object.is() で判定しているとのことです。なので、pushやspliceでは前回と同じ値と判定されるそうです。

そのため、pushなどは使用せずに、新たに配列を作成して保存する必要があります。

追加

配列に要素を追加する場合はスプレット構文を使用します。

const [fruits, setFruits] = useState(['りんご', 'バナナ', 'いちご'])

const addFruits = () => {
    setFruits([...fruits, 'ドリアン'])
}

削除

配列の特定の要素を削除したい場合は、filter()を使用して、新たに配列を作成します。
下記の例では、'バナナ'の要素を除いた配列を新たに作成して、stateの値を更新しています。

const [fruits, setFruits] = useState(['りんご', 'バナナ', 'いちご'])

const deleteFruits = () => {
    setFruits(
        fruits.filter((fruit, index) => (fruit !== 'バナナ'))
    )
}

変更

配列の特定の要素を変更したい場合は、map()を使用して、新たに配列を作成します。
下記の例では、indexが2の要素を'ドリアン'に変更した配列を新たに作成して、stateの値を更新しています。

const [fruits, setFruits] = useState(['りんご', 'バナナ', 'いちご'])

const updateFruits = () => {
    setFruits(
        fruits.map((fruit, index) => (index === 2 ? 'ドリアン' : fruit))
    )
}

備考

filter()の説明
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
map()の説明
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

※どちらも新たに配列を生成していることが重要