配列のstate 増やす、減らす

カウンター(数値)、フォーム(文字列)ときて、stateの最終形は配列です。「いいねした人の一覧」「タスクのリスト」——アプリの本体は、たいてい配列のstateです。この章で「配列に追加する」「配列から削除する」の2つの型を手に入れると、ToDoアプリの材料が全部そろいます。

大原則の再確認: 壊さず、作り直す

チャプター14でこう言いました——「Reactの世界では、値は壊して書き換えるのではなく、新しい値を作って差し替える」。配列でこの原則を破ると、こうなります。

const [names, setNames] = useState<string[]>([]);

const handleAdd = () => {
  names.push("太郎");   // × 元の配列を直接壊している
  setNames(names);      // 同じ配列を渡してもReactは「変わってない」と判断
};

pushは使えません。pushは元の配列そのものを書き換える(壊す)操作だからです。Reactは「前のstateと今のstateが別のものかどうか」で描き直しを判断するので、同じ配列を渡されると「変わってない」と見なして画面を更新しません。エラーも出ないのに画面が動かない——stateの世界で一番典型的なバグです。

ひとつ、初出の書き方があります。useState<string[]>([])——初期値が空配列 [] だと、TypeScriptには「何の配列か」が分からないため、< > で「文字列の配列です」と教えています。「useStateの型指定は < > に書く」、形で覚えてください。

追加は「スプレッド構文」で作り直す

では正しい追加は? 元の配列の中身を全部コピーした新しい配列を作り、末尾に足す。それを1行でやる道具がスプレッド構文です。