React Query v4：追蹤查詢與結構共享，效能大躍進

React Query v4 效能優化：解鎖更順暢的渲染體驗

React Query 是一個強大的狀態管理庫，尤其在處理非同步資料時，它能有效簡化我們的程式碼。而隨著 v4 版本的推出，React Query 在效能優化方面有了顯著的提升，其中一個關鍵的變革就是「追蹤查詢 (Tracked Queries)」的預設啟用。

事件開頭短結論

React Query v4 預設開啟了追蹤查詢功能，這意味著它會自動偵測您的元件使用了哪些查詢結果，並僅在這些結果發生變化時才重新渲染元件。這不僅能有效減少不必要的渲染，更能提升應用程式的整體效能。

事件重點

• 追蹤查詢 (Tracked Queries): 這是 v4 版本預設啟用的功能。它會自動追蹤元件中使用的查詢數據，並僅在相關數據變更時觸發重新渲染。
• notifyOnChangeProps 選項: 您可以透過 notifyOnChangeProps 選項來客製化追蹤查詢行為。
  • notifyOnChangeProps: 'all': 若您想讓元件對所有查詢結果變化做出反應，可以使用此設定。
  • 預設行為 (notifyOnChangeProps 未設定): React Query 會自動追蹤元件使用的屬性。
• 結構共享 (Structural Sharing): React Query 內建的優化，確保資料參考的穩定性，減少不必要的重新渲染。

深入了解追蹤查詢

在 v4 之前，若要優化渲染，您需要手動設定 notifyOnChangeProps，明確指定元件需要監聽的查詢結果屬性。然而，這需要開發者自行維護，容易出錯。

現在，React Query 透過追蹤查詢，自動偵測元件使用的查詢數據，並僅在這些數據變更時才重新渲染。這使得開發者不再需要手動設定 notifyOnChangeProps，程式碼也更簡潔。當然，如果需要，您仍然可以使用 notifyOnChangeProps: 'all' 來監聽所有查詢結果。

結構共享的威力

除了追蹤查詢，React Query 另一個重要的優化是「結構共享」。當資料更新時，React Query 會盡可能地保留舊的資料參考。例如，當您更新一個待辦事項的狀態時，React Query 只會建立新的待辦事項物件，而其他未變更的待辦事項物件則會保持原來的參考。這可以避免不必要的元件重新渲染，提高效能。

個人心得

React Query v4 的這些優化，讓開發者更容易編寫高效能的 React 應用程式。追蹤查詢的預設啟用，簡化了開發流程，減少了不必要的渲染，讓程式碼更易於維護。結構共享則進一步提升了效能，讓您的應用程式更流暢。 善用這些功能，您就能打造出更快速、更穩定的使用者體驗。

參考閱讀

• https://tkdodo.eu/blog/react-query-render-optimizations
• https://tanstack.com/query/v5/docs/framework/react/guides/render-optimizations
• https://tanstack.com/query/v4/docs/react/guides/migrating-to-react-query-4
• https://codesandbox.io/s/tanstack-query-notifyonchangeprops-playground-ygwfz4