useState()した値をsetで更新しようとしたら、なぜか古い値で更新されてハマった

見事に引っかかったのでメモ。

TL;DR

useState()の値は常に最新とは限らんぞ。

ja.react.dev

やりたかったこと

useStateでRecord<ID, Record<string, any>>を管理しているときに、onChangeを受けたIDのパラメータだけを変更したかった。

なにがおきた

ID=1を更新して、ID=2を更新すると、ID=1が過去データに巻き戻る現象が起きた。

どう対策した

useStateの値を使うのではなく、set関数でうまいこと対応した。

詳しいことは「useState 値 反映」とかで調べると仕様が出てくる。