From 0e03367c4c14b40d3042c951f1bb250233485eef Mon Sep 17 00:00:00 2001 From: devgioele Date: Wed, 6 Sep 2023 18:48:58 +0200 Subject: [PATCH 1/3] make abstract set query and pagination reference stable --- src/engine/pagination.ts | 71 +++++++++++++++++++++++++++------------- 1 file changed, 49 insertions(+), 22 deletions(-) diff --git a/src/engine/pagination.ts b/src/engine/pagination.ts index 2081242..6c09abd 100644 --- a/src/engine/pagination.ts +++ b/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, options?: Partial, ) => { - 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, - options?: Partial, - ) => { + const setQueryWithoutPagination = useCallback( + (query: Partial, options?: Partial) => { const mergedOptions = { ...DEFAULT_CHANGE_QUERY_OPTIONS, ...options } setQuery({ ...query, @@ -97,7 +101,11 @@ export const useAbstractQueryAndPagination = < : undefined, }) }, - resetQuery: (options?: Partial) => { + [setQuery, mergedDefaultPagination.page], + ) + + const resetQuery = useCallback( + (options?: Partial) => { 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, } } From bdd9dbc673e3d0a9f7c7a05a16cbd74618fcac01 Mon Sep 17 00:00:00 2001 From: devgioele Date: Thu, 7 Sep 2023 07:47:54 +0200 Subject: [PATCH 2/3] make next router reference stable --- src/routers/nextRouter.ts | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/src/routers/nextRouter.ts b/src/routers/nextRouter.ts index 6d7b085..2e0cc78 100644 --- a/src/routers/nextRouter.ts +++ b/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, 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 = < From 9d83f347e808042188f620ecb59d649c505369e9 Mon Sep 17 00:00:00 2001 From: devgioele Date: Thu, 7 Sep 2023 08:51:04 +0200 Subject: [PATCH 3/3] make remaining routers reference stable --- src/routers/inMemory.ts | 23 ++++++++++++++++++----- src/routers/reactRouter.ts | 23 ++++++++++++++++++----- 2 files changed, 36 insertions(+), 10 deletions(-) diff --git a/src/routers/inMemory.ts b/src/routers/inMemory.ts index 7d3af3e..780862a 100644 --- a/src/routers/inMemory.ts +++ b/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({}) - return { - getQuery: (defaultQuery) => { + const getQuery = useCallback( + (defaultQuery: Query) => { return { ...defaultQuery, ...inMemoryQuery } }, - setQuery: (query) => { + [inMemoryQuery], + ) + + const setQuery = useCallback( + (query: Partial) => { 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 = < diff --git a/src/routers/reactRouter.ts b/src/routers/reactRouter.ts index 9bc8235..744e2ce 100644 --- a/src/routers/reactRouter.ts +++ b/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, 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 = <