Reactで、Array.sortしたデータが、useMemoやuseCallbackに反映されない

by codechord. 0 Comments

  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

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);

その他の例についても、先のページがやっぱりわかりやすいので、一読をオススメ。

https://noah.plus/blog/007/


実例はこちら

実際、この操作は、カスタムフックでページネーションを作っていて、この症状が発生したのだけど、
別エントリにしまとめてみたので、よかったら合わせてどうぞ。

カスタムフックの設計指針についてページネーションで考える


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA