stateを更新してもレンダリングされない【React】

問題

stateで管理している配列の中身を変更しても表示が更新されない(再レンダリングされない)．

解決方法

配列の中身を変更するのではなく、新しい配列を作り，それをsetStateする．

具体的に

例えば，以下のコードで，stateの配列は更新されますが，レンダリングは行われません．

// コンポーネント
function Example(){
  const [stateArray, setStateArray] = use State([0, 1, 2]); // state
  // 略
  copyArray = stateArray; // stateの配列をコピー(参照渡し)
  copyArray[0] = copyArray[0] + 1; // 配列を変更する処理
  setStateArray(copyArray); // stateに設定
  // 略
}

これは，stateの配列を参照渡しによってコピーしている部分を

  copyArray = stateArray; // stateの配列をコピー(参照渡し)

以下のように，値渡しに変更することで解決できます．

  copyArray = stateArray.slice(0, stateArray.length); // stateの配列をコピー(値渡し)

原因

stateの更新やレンダリングについて調べていたところ，公式ドキュメントに以下のような記述がありました．

現在値と同じ値で更新を行った場合、React は子のレンダーや副作用の実行を回避して処理を終了します（React は Object.is による比較アルゴリズムを使用します)

さらに，Object.jsのリファレンスを確認すると，

Object.is() determines whether two values are the same value. Two values are the same if one of the following holds:
...
・ both the same object (meaning both values reference the same object in memory)
...

とありました．

つまりReactでは，参照が同じ場合は変更なしとみなされ，再レンダリングが行われないようです．

そのため，配列の中身を変更しただけだと更新されないということですね．