Merge pull request #19 from aboutbits/reference-stable-hooks

Make all return values reference stable

Author: devgioele

src/engine/pagination.ts

@@ -1,3 +1,4 @@
+import { useCallback, useMemo } from 'react'
 import { queryValueToIntOrUndefined } from '../utils'
 import {
   Query,
@@ -56,14 +57,21 @@ export const useAbstractQueryAndPagination = <
   defaultPagination?: Partial<PaginationQuery>,
   options?: Partial<AbstractQueryOptions>,
 ) => {
-  const mergedDefaultPagination = {
-    ...DEFAULT_PAGINATION,
-    ...defaultPagination,
-  }
-  const mergedDefaultQueryAndPagination = {
-    ...defaultQuery,
-    ...mergedDefaultPagination,
-  }
+  const mergedDefaultPagination = useMemo(
+    () => ({
+      ...DEFAULT_PAGINATION,
+      ...defaultPagination,
+    }),
+    [defaultPagination],
+  )
+
+  const mergedDefaultQueryAndPagination = useMemo(
+    () => ({
+      ...defaultQuery,
+      ...mergedDefaultPagination,
+    }),
+    [defaultQuery, mergedDefaultPagination],
+  )
 
   const { query, setQuery } = useAbstractQuery(
     router,
@@ -83,12 +91,8 @@ export const useAbstractQueryAndPagination = <
     options,
   )
 
-  return {
-    query,
-    setQuery: (
-      query: Partial<TQuery>,
-      options?: Partial<ChangeQueryOptions>,
-    ) => {
+  const setQueryWithoutPagination = useCallback(
+    (query: Partial<TQuery>, options?: Partial<ChangeQueryOptions>) => {
       const mergedOptions = { ...DEFAULT_CHANGE_QUERY_OPTIONS, ...options }
       setQuery({
         ...query,
@@ -97,7 +101,11 @@ export const useAbstractQueryAndPagination = <
           : undefined,
       })
     },
-    resetQuery: (options?: Partial<ChangeQueryOptions>) => {
+    [setQuery, mergedDefaultPagination.page],
+  )
+
+  const resetQuery = useCallback(
+    (options?: Partial<ChangeQueryOptions>) => {
       const mergedOptions = { ...DEFAULT_CHANGE_QUERY_OPTIONS, ...options }
       setQuery({
         ...defaultQuery,
@@ -106,18 +114,37 @@ export const useAbstractQueryAndPagination = <
           : undefined,
       })
     },
-    page: pagination.page,
-    size: pagination.size,
-    setPage: (page: PaginationQuery['page']) => {
+    [defaultQuery, mergedDefaultPagination.page, setQuery],
+  )
+
+  const setPage = useCallback(
+    (page: PaginationQuery['page']) => {
       setPagination({ page })
     },
-    setSize: (size: PaginationQuery['size']) => {
+    [setPagination],
+  )
+
+  const setSize = useCallback(
+    (size: PaginationQuery['size']) => {
       setPagination({ size })
     },
+    [setPagination],
+  )
+
+  const resetQueryAndPagination = useCallback(() => {
+    setQuery(mergedDefaultQueryAndPagination)
+  }, [setQuery, mergedDefaultQueryAndPagination])
+
+  return {
+    query,
+    setQuery: setQueryWithoutPagination,
+    resetQuery,
+    page: pagination.page,
+    size: pagination.size,
+    setPage,
+    setSize,
     setPagination,
     resetPagination,
-    resetQueryAndPagination: () => {
-      setQuery(mergedDefaultQueryAndPagination)
-    },
+    resetQueryAndPagination,
   }
 }

src/routers/inMemory.ts

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import {
   AbstractQuery,
   AbstractQueryOptions,
@@ -13,11 +13,15 @@ import {
 const useInMemoryRouter = (): Router => {
   const [inMemoryQuery, setInMemoryQuery] = useState<Query>({})
 
-  return {
-    getQuery: (defaultQuery) => {
+  const getQuery = useCallback(
+    (defaultQuery: Query) => {
       return { ...defaultQuery, ...inMemoryQuery }
     },
-    setQuery: (query) => {
+    [inMemoryQuery],
+  )
+
+  const setQuery = useCallback(
+    (query: Partial<Query>) => {
       const sanitizedQuery: Query = {}
       for (const [key, value] of Object.entries(query)) {
         if (value !== undefined) {
@@ -26,7 +30,16 @@ const useInMemoryRouter = (): Router => {
       }
       setInMemoryQuery({ ...inMemoryQuery, ...sanitizedQuery })
     },
-  }
+    [inMemoryQuery],
+  )
+
+  return useMemo(
+    () => ({
+      getQuery,
+      setQuery,
+    }),
+    [getQuery, setQuery],
+  )
 }
 
 export const useQuery = <

src/routers/nextRouter.ts

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import { useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import {
   Query,
   ParseQuery,
@@ -28,8 +28,8 @@ const useNextRouter = (
     [options],
   )
 
-  return {
-    getQuery: (defaultQuery) => {
+  const getQuery = useCallback(
+    (defaultQuery: Query) => {
       const query: Query = {}
       for (const [key, value] of Object.entries(nextRouter.query)) {
         if (value !== undefined) {
@@ -38,7 +38,11 @@ const useNextRouter = (
       }
       return { ...defaultQuery, ...query }
     },
-    setQuery: (query, defaultQuery) => {
+    [nextRouter.query],
+  )
+
+  const setQuery = useCallback(
+    (query: Partial<Query>, defaultQuery: Query) => {
       const newQuery = { ...nextRouter.query, ...query }
       const newQueryWithoutDefaults = Object.fromEntries(
         Object.entries(newQuery).filter(
@@ -55,7 +59,16 @@ const useNextRouter = (
         })
       }
     },
-  }
+    [nextRouter, mergedOptions],
+  )
+
+  return useMemo(
+    () => ({
+      getQuery,
+      setQuery,
+    }),
+    [getQuery, setQuery],
+  )
 }
 
 export const useQuery = <

src/routers/reactRouter.ts

@@ -1,5 +1,5 @@
 import { useLocation, useNavigate } from 'react-router-dom'
-import { useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import {
   Query,
   AbstractQuery,
@@ -27,8 +27,8 @@ const useReactRouter = (
     [options],
   )
 
-  return {
-    getQuery: (defaultQuery) => {
+  const getQuery = useCallback(
+    (defaultQuery: Query) => {
       const query: Query = {}
       for (const [key, value] of new URLSearchParams(search).entries()) {
         const decodedValues = value
@@ -41,7 +41,11 @@ const useReactRouter = (
       }
       return { ...defaultQuery, ...query }
     },
-    setQuery: (query, defaultQuery) => {
+    [search],
+  )
+
+  const setQuery = useCallback(
+    (query: Partial<Query>, defaultQuery: Query) => {
       const urlSearchParams = new URLSearchParams(search)
       for (const [key, value] of Object.entries(query)) {
         if (value === defaultQuery[key]) {
@@ -64,7 +68,16 @@ const useReactRouter = (
         { replace: mergedOptions.setQueryMethod === 'replace' },
       )
     },
-  }
+    [mergedOptions.setQueryMethod, navigate, pathname, search],
+  )
+
+  return useMemo(
+    () => ({
+      getQuery,
+      setQuery,
+    }),
+    [getQuery, setQuery],
+  )
 }
 
 export const useQuery = <