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
RSSNext · Nov 27, 2024 · 970aced · 970aced
1 parent 742f915
commit 970aced
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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