optimize react router pagination functions

Author: mmalfertheiner

src/reactRouterPagination.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'
 
 import { UseSearchAndPagination } from './types'
@@ -11,42 +11,54 @@ export function useSearchAndPagination(): UseSearchAndPagination {
 
   const params = useMemo(() => new URLSearchParams(routeQuery), [routeQuery])
 
+  const search = useCallback(
+    (query: string) => {
+      if (query === '') {
+        params.delete('search')
+      } else {
+        params.set('search', query)
+      }
+      params.delete('page')
+      params.delete('size')
+
+      routerHistory.push({
+        pathname: routerUrl,
+        search: params.toString(),
+      })
+    },
+    [routerHistory, params]
+  )
+
+  const clear = useCallback(() => {
+    params.delete('search')
+    params.delete('page')
+    params.delete('size')
+
+    routerHistory.push({
+      pathname: routerUrl,
+      search: params.toString(),
+    })
+  }, [routerHistory, params])
+
+  const setPage = useCallback(
+    (page: number) => {
+      params.set('page', page.toString())
+      routerHistory.push({
+        pathname: routerUrl,
+        search: params.toString(),
+      })
+    },
+    [routerHistory, params]
+  )
+
   return {
     search: params.get('search') || '',
     page: convert(params.get('page'), 0),
     size: convert(params.get('size'), 15),
     actions: {
-      search: (query: string) => {
-        if (query === '') {
-          params.delete('search')
-        } else {
-          params.set('search', query)
-        }
-        params.delete('page')
-        params.delete('size')
-
-        routerHistory.push({
-          pathname: routerUrl,
-          search: params.toString(),
-        })
-      },
-      clear: () => {
-        params.delete('search')
-        params.delete('page')
-        params.delete('size')
-
-        routerHistory.push({
-          pathname: routerUrl,
-          search: params.toString(),
-        })
-      },
-      setPage: (page: number) => {
-        params.set('page', page.toString())
-        routerHistory.push({
-          pathname: routerUrl,
-          search: params.toString(),
-        })
-      },
+      search,
+      clear,
+      setPage,
     },
   }
 }