React Query のレンダリング最適化を目指した話 - Techtouch Developers Blog

エンジニアの macchii です。この記事はテックタッチアドベントカレンダー 14 日目の記事です。 テックタッチでは React を利用して WEB フロントエンドを開発しています。あわせて、リモートデータの取得、更新、キャッシングには React Query を導入しています。本記事では、簡単なタスク管理アプリを題材に、「React Query の再レンダリングを最適化するテクニック」紹介します。 ja.reactjs.org react-query.tanstack.com TL;DR はじめに React Query は取得データを厳密に比較（deep compare）する 参照していないプロパティの変更でも再レンダリングが発生する notifyOnChangeProps オプション select オプション まとめ TL;DR React Query は取得データを厳密に比較（

[carolina04]

“React Query は取得データを厳密に比較し、変更がある場合のみ再レンダリングします notifyOnChangeProps オプションで、再レンダリングの対象となるプロパティを限定できます select オプションで絞り込んだデータ同士を”

[furu_ichi]

ちょうどReactを勉強中なので、少し前までは意味不明だったであろうサンプルコードの内容が頭に入ってきて「読める、読めるぞ」とムスカみたいになってる。

[yujiorama]

明示できるし規約でも制御できるし、便利なんだな