Reduxで状態を更新する際に、なぜ新しいオブジェクトを作るのか
以下の記事の要約です。
- Reactで再レンダーする際には、stateやpropsに差分があるかをチェックしている
- このチェックはshallow comparison(浅い比較)が使われている
- 理由は、deep comparison(深い比較)だとパフォーマンスに影響がでるため
- shallow comparison を使っているため、参照が変わらないが値が変わるような場合には React は再レンダーしてくれない
- 例えば、オブジェクトの参照はそのままで、そのオブジェクトのあるプロパティの値だけ変更した場合は、本来なら値が変わっているので再レンダーして欲しいけど、Reactは再レンダーしてくれない(繰り返しになるがshallow comparisonなので、オブジェクトへの参照が同じだと、変わっていないと評価されるため)
- この問題が発生しないようにするために、Reduxで何かしらの値を変更する場合は、新しいオブジェクトをつくる。こうすることで参照自体が変わるので、Reactによって再レンダーされる