From 970aced378a60061219c1d369be131d3ce618c04 Mon Sep 17 00:00:00 2001
From: Whitewater <me@waterwater.moe>
Date: Wed, 27 Nov 2024 18:54:54 +0800
Subject: [PATCH] refactor: update useRouteParams hook to prevent unnecessary
 re-renders (#1872)

* refactor: deprecate useRouteParams hook and replace with useRouteParamsSelector to prevent unnecessary re-renders

* chore: clean code
---
 apps/renderer/src/hooks/biz/useRouteParams.ts   | 7 +++----
 apps/renderer/src/modules/entry-column/hooks.ts | 5 ++---
 apps/renderer/src/store/feed/hooks.ts           | 1 -
 packages/components/src/atoms/route.ts          | 4 +++-
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/apps/renderer/src/hooks/biz/useRouteParams.ts b/apps/renderer/src/hooks/biz/useRouteParams.ts
index fbace71f12..3f08e4d137 100644
--- a/apps/renderer/src/hooks/biz/useRouteParams.ts
+++ b/apps/renderer/src/hooks/biz/useRouteParams.ts
@@ -77,12 +77,11 @@ const parseRouteParams = (params: Params<any>, search: URLSearchParams): BizRout
 }
 
 export const useRouteParams = () => {
-  const params = useParams()
-  const [search] = useSearchParams()
-
-  return parseRouteParams(params, search)
+  return useRouteParamsSelector((s) => s)
 }
+
 const noop = [] as any[]
+
 export const useRouteParamsSelector = <T>(
   selector: (params: BizRouteParams) => T,
   deps = noop,
diff --git a/apps/renderer/src/modules/entry-column/hooks.ts b/apps/renderer/src/modules/entry-column/hooks.ts
index c04c13ee6c..92ab94102a 100644
--- a/apps/renderer/src/modules/entry-column/hooks.ts
+++ b/apps/renderer/src/modules/entry-column/hooks.ts
@@ -60,10 +60,9 @@ export const useEntriesByView = ({
   onReset?: () => void
   isArchived?: boolean
 }) => {
-  const routeParams = useRouteParams()
-  const unreadOnly = useGeneralSettingKey("unreadOnly")
+  const { feedId, isAllFeeds, view, isCollection, inboxId, listId } = useRouteParams()
 
-  const { feedId, view, isAllFeeds, isCollection, listId, inboxId } = routeParams
+  const unreadOnly = useGeneralSettingKey("unreadOnly")
 
   const folderIds = useFolderFeedsByFeedId({
     feedId,
diff --git a/apps/renderer/src/store/feed/hooks.ts b/apps/renderer/src/store/feed/hooks.ts
index 0ffe87b58e..fe234f0078 100644
--- a/apps/renderer/src/store/feed/hooks.ts
+++ b/apps/renderer/src/store/feed/hooks.ts
@@ -71,7 +71,6 @@ export const useInboxByIdSelector = <T>(
 
 export const useFeedHeaderTitle = () => {
   const { t } = useTranslation()
-
   const { feedId: currentFeedId, view, listId, inboxId } = useRouteParams()
 
   const listTitle = useListByIdSelector(listId, getPreferredTitle)
diff --git a/packages/components/src/atoms/route.ts b/packages/components/src/atoms/route.ts
index 47bb3725d9..f5273d8d43 100644
--- a/packages/components/src/atoms/route.ts
+++ b/packages/components/src/atoms/route.ts
@@ -3,6 +3,7 @@ import { atom, useAtomValue } from "jotai"
 import { selectAtom } from "jotai/utils"
 import { useMemo } from "react"
 import type { Location, NavigateFunction, Params } from "react-router"
+import { shallow } from "zustand/shallow"
 
 interface RouteAtom {
   params: Readonly<Params<string>>
@@ -29,7 +30,8 @@ const noop = []
 export const useReadonlyRouteSelector = <T>(
   selector: (route: RouteAtom) => T,
   deps: any[] = noop,
-): T => useAtomValue(useMemo(() => selectAtom(routeAtom, (route) => selector(route)), deps))
+): T =>
+  useAtomValue(useMemo(() => selectAtom(routeAtom, (route) => selector(route), shallow), deps))
 
 // Vite HMR will create new router instance, but RouterProvider always stable