【React】配列に追加

配列に追加するとき、普段はpushメソッドを使うが、Reactではうまく動かないので、スプレッド構文を使う。理由は下記とかほかの記事を参照してほしいけど簡単に。
https://www.mitomex.blog/mutable-immutable/
https://zenn.dev/tk4/articles/4ccd85460bb3fff7fff8

破壊的メソッド

破壊的メソッドとは、配列を操作するメソッド。
破壊的メソッドを使うと元の配列の値を変えることができる。

Reactでは変更部分の差異を検知して再描画されるため、
破壊的メソッドを使った場合、値が変わったことが検知できなくなってしまう。
破壊的メソッド一例：
pushやreverse、splice、sortなどがある。

イメージ的には。。。

React：変更とかしてないよね？
-いいえ！もともとこうですよ！
React：ですよね！わかりました。再描画しません！

スプレッド構文の書き方

あんまりよくない例

普段調べると下記のコードが多くみられる。
動くけど、たまに意図しない動きになるらしい。
また、スプレッド構文で展開しているarrはステートそのもの。
呼び出しの時にしか使わないのが基本で、ステートそのものを使ってステートを更新させることになるので、好ましくない。

    const [arr, setArr] = useState([1,2,3]);
    const addArr = () => {
        setSrcURLs([...arr, 4]}
        );

おすすめ例

引数にもともとの配列を指定。
元の配列をスプレッド構文で展開して、配列の末尾に値を追加する。
setArrは追加した状態の配列を返し、その返り値でステートを更新する。

    const [arr, setArr] = useState([1,2,3]);
    const addArr = () => {
        setSrcURLs((prevArr) => {
            return [...prevArr, 4]
        });