Reactのオブジェクトや配列を使ったuseState更新

こんにちわ!boraです!(@bora_sns)

Reactで必ず使うであろうusuState更新。「あれ?更新されない」ってなる事ありませんか?自分も最初は良く意図したタイミングで更新されないなと感じる事が結構多かったです。今回はその解決法をご紹介します。

コードの確認には、CodeSandboxが便利です。オンラインエディタなのでコピペでそのまま表示確認が可能です。是非使ってみてください。

usuStateとは

useStateとは画面に表示されるデータ・値を保持しているグローバル変数の様な変数です(ざっくり)

構文はこちら(ご作法なのでこの形で覚えてくださいね)
const [state, setstate] = useState(初期値);

①‥値や関数を保持するためのstate変数
②‥①のstate変数を更新する事が出来る唯一の更新関数(通常の代入などでstate変数を更新しようとするとエラーになります)
③useStateの初期値

単一state更新

単一のuseState更新であれば次の様な形で問題なく更新可能です。
この点に関しては迷う事はあまりないかなと思います。

 

オブジェクトでのstate更新(複数)

更新されません。NG。

 

更新されます。OK。

 

全体をコピーした上で変更点をマージするのがポイント!

更新判定は「値の同一性」で判断される

React更新上にも「更新のアルゴリズム」について詳細な説明があるので是非ご一読を。

 

まとめ

Reactを使い始めの頃には「意図したタイミングでstateが更新されない!」というのは比較的よく遭遇する問題かなと思います。自分もよく遭遇していました(汗)今回はスプレッド構文でご紹介しましたが「Object.assign」でも更新する事が可能です。

要は「オブジェクトや配列などで複数項目がある場合は、特定した特定項目のみでなく、全体をコピーした上(スプレッド構文やObject.assign等で)で特定項目をマージする」という点がポイントかと思います!