【React】 useStateで配列を保存するときの注意点

useStateで配列を保存する時は、
新しい配列を生成して保存しないと再描画されません。

サンプルコード

×： 再描画されない

const [value, setValue] = React.useState(null)

value.push(props.newValue)

setValue(value) 

○： 再描画される

const [value, setValue] = React.useState(null)

setValue([...value, props.newValue])

理由

Reactではstateの値が変化した時にコンポーネントが再描画されます。

stateの値の変化を、Object.is() で判定しているとのことです。なので、pushやspliceでは前回と同じ値と判定されるそうです。

そのため、再描画が起きないので、[...array, props.newValue]　などで値をコピーした新しい配列を生成してstateに保存すると再描画されます。

参考

• https://gotohayato.com/content/509/
• https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/is
• http://jsstudy.hatenablog.com/entry/Convert-to-JSON-when-comparing-arrays-and-objects-in-JavaScript

おまけ

新しい配列を生成する以外にも、immutable.jsというのを使っても解決できるそうです。

• https://immutable-js.github.io/immutable-js/

2023/3/10: 追記、上記の内容は オブジェクトでも同様です。