【React】スプレッド構文とuseStateを使って配列を追加する

useStateを使用して配列の状態を管理している際に、その配列に対して新しい要素を追加するときに使えるパターンを備忘する。

//そもそもスプレッド構文の使い方
const oldArray = [1, 2, 3];
const newArray = [...oldArray, 4]; // [1, 2, 3, 4]

//useStateとスプレッド構文を使用したパターン
const [arry, setArry] = useState([]);
const newArryCreate = () => {
  const newArry = {
    id: "12345",
    data: "データ",
  };
  setArry((prevArry) => [...prevArry, newArry];
};

newArryCreate();

set関数における引数(prevArryについて)

setArry((prevArry) => [...prevArry, newArry]);という記述は、Reactの状態更新関数を使用している。このパターンは、特にリストやオブジェクトなどの複雑な状態を扱う際に非常に強力。ここでのprevArryは、状態更新関数によって提供される前の状態（この場合はarryの状態）を参照するためのパラメーターとなる。このパラメーターは、実際にはどこにも明示的に宣言されていませんが、関数を呼び出す際にReactによって自動的に提供される。