ステート変数はセッターでないと値を変更できない

Reactを触っていれば必ず使う事になるステート変数。

const [var, setVar] = useState(初期値);

これを使うにあたり、少し複雑だなと感じた部分について記事にさせていただきます。

例えば、次のような10個の要素を持つ配列型のステート変数を宣言したとします。

const [arry, setArry] = useState([]);
setArry([...Array(10)]);

このarryに対して、spliceメソッドを使って２番目の要素を取り除きたいとします。
そのためには次のように記述する必要があります。

const newArry = [...arry];
newArry.splice(2, 1);
setArry(newArry);

ステート変数はセッターでなければ変更できないので、spliceを直接arryに使用するわけにはいきません。従って、スプレッド構文を使って...arryを要素とする新しい配列newArryを宣言し、newArryに対してspliceを実行するわけです。そして、要素を取り除いたnewArryをarryに対してセッターでセットします。

まとめ

初めてReactを使った時、なかなかすんなりと理解できなかった部分だったので、記事にさせていただきました。
同じような点で躓いた方がおられれば、参考になれば幸いです。