Reactで、Array.sortしたデータが、useMemoやuseCallbackに反映されない
Monsterkoi / Pixabay
Reactで処理が複雑になれば、useMemoやuseCallbackなどを使い、描画コストがかからないよう効率化していくわけでが、
ページネーションを作っていて、その際、useMemoの値が更新されない症状が発生したのでそのメモ。
Immutableであれ
結構、Reactなどで重要な、immutabuleであることがポイントで、破壊的な関数をつかってたのが原因。Immutableじゃないぞ！っていうエラーが出るわけもなく、ちょっとハマった。
immutableをわかったつもりでわかっていなかったんだと思う。
immutabuleについては、こちらの記事が、完結でわかりやすい。
https://noah.plus/blog/007/
配列/オブジェクトの正しい加工
具体的には、並び替えをする処理に、Array.sortやArray.sliceを、そのまま使って加工していた。
だめなコード例は、次のような感じ
items.sort(並び替えの関数); items.slice(start,end);
次のように、加工前に、あらたなオブジェクト（配列）を作ってしまうことで、元のオブジェクトを壊さないで済む。
[...items].sort(並び替えの関数); [...items].slice(start,end);
その他の例についても、先のページがやっぱりわかりやすいので、一読をオススメ。
実例はこちら
実際、この操作は、カスタムフックでページネーションを作っていて、この症状が発生したのだけど、
別エントリにしまとめてみたので、よかったら合わせてどうぞ。