diff --git a/packages/e2e/cypress/e2e/repro-359.cy.js b/packages/e2e/cypress/e2e/repro-359.cy.js index 7a1671bee..a9ed26cb6 100644 --- a/packages/e2e/cypress/e2e/repro-359.cy.js +++ b/packages/e2e/cypress/e2e/repro-359.cy.js @@ -11,7 +11,7 @@ it('repro-359', () => { cy.get('#nuqss-component').should('have.text', '') cy.contains('Component 1 (nuqs)').click() - cy.wait(100) + // cy.wait(100) cy.location('search').should('eq', '?param=comp1&component=comp1') cy.get('#comp1').should('have.text', 'comp1') cy.get('#comp2').should('not.exist') @@ -21,7 +21,7 @@ it('repro-359', () => { cy.get('#nuqss-component').should('have.text', 'comp1') cy.contains('Component 2 (nuqs)').click() - cy.wait(100) + // cy.wait(100) cy.location('search').should('eq', '?param=comp2&component=comp2') cy.get('#comp1').should('not.exist') cy.get('#comp2').should('have.text', 'comp2') @@ -31,7 +31,7 @@ it('repro-359', () => { cy.get('#nuqss-component').should('have.text', 'comp2') cy.contains('Component 1 (nuq+)').click() - cy.wait(100) + // cy.wait(100) cy.location('search').should('eq', '?param=comp1&component=comp1') cy.get('#comp1').should('have.text', 'comp1') cy.get('#comp2').should('not.exist') @@ -41,7 +41,7 @@ it('repro-359', () => { cy.get('#nuqss-component').should('have.text', 'comp1') cy.contains('Component 2 (nuq+)').click() - cy.wait(100) + // cy.wait(100) cy.location('search').should('eq', '?param=comp2&component=comp2') cy.get('#comp1').should('not.exist') cy.get('#comp2').should('have.text', 'comp2') diff --git a/packages/nuqs/src/update-queue.ts b/packages/nuqs/src/update-queue.ts index 82c08cce6..6f22bf7f2 100644 --- a/packages/nuqs/src/update-queue.ts +++ b/packages/nuqs/src/update-queue.ts @@ -57,10 +57,6 @@ export function enqueueQueryStringUpdate( return serializedOrNull } -export function getQueuedValue(key: string) { - return updateQueue.get(key) ?? null -} - /** * Eventually flush the update queue to the URL query string. * diff --git a/packages/nuqs/src/useQueryState.ts b/packages/nuqs/src/useQueryState.ts index 7aa2feef8..6b13cdc23 100644 --- a/packages/nuqs/src/useQueryState.ts +++ b/packages/nuqs/src/useQueryState.ts @@ -7,7 +7,6 @@ import { emitter, type CrossHookSyncPayload } from './sync' import { FLUSH_RATE_LIMIT_MS, enqueueQueryStringUpdate, - getQueuedValue, scheduleFlushToURL } from './update-queue' import { safeParse } from './utils' @@ -225,13 +224,12 @@ export function useQueryState( const router = useRouter() // Not reactive, but available on the server and on page load const initialSearchParams = useSearchParams() - const queryRef = React.useRef(null) + const queryRef = React.useRef( + initialSearchParams?.get(key) ?? null + ) const [internalState, setInternalState] = React.useState(() => { - const queueValue = getQueuedValue(key) - const urlValue = initialSearchParams?.get(key) ?? null - const value = queueValue ?? urlValue - queryRef.current = value - return value === null ? null : safeParse(parse, value, key) + const query = initialSearchParams?.get(key) ?? null + return query === null ? null : safeParse(parse, query, key) }) const stateRef = React.useRef(internalState) debug( diff --git a/packages/nuqs/src/useQueryStates.ts b/packages/nuqs/src/useQueryStates.ts index f648d4d74..3ac7a1264 100644 --- a/packages/nuqs/src/useQueryStates.ts +++ b/packages/nuqs/src/useQueryStates.ts @@ -11,7 +11,6 @@ import { emitter, type CrossHookSyncPayload } from './sync' import { FLUSH_RATE_LIMIT_MS, enqueueQueryStringUpdate, - getQueuedValue, scheduleFlushToURL } from './update-queue' import { safeParse } from './utils' @@ -74,9 +73,13 @@ export function useQueryStates( // Not reactive, but available on the server and on page load const initialSearchParams = useSearchParams() const queryRef = React.useRef>({}) + // Initialise the queryRef with the initial values + if (Object.keys(queryRef.current).length !== Object.keys(keyMap).length) { + queryRef.current = Object.fromEntries(initialSearchParams?.entries() ?? []) + } + const [internalState, setInternalState] = React.useState(() => { const source = initialSearchParams ?? new URLSearchParams() - queryRef.current = Object.fromEntries(source.entries()) return parseMap(keyMap, source) }) @@ -99,8 +102,7 @@ export function useQueryStates( }, [ Object.keys(keyMap) .map(key => initialSearchParams?.get(key)) - .join('&'), - keys + .join('&') ]) // Sync all hooks together & with external URL changes @@ -214,9 +216,7 @@ function parseMap( ) { return Object.keys(keyMap).reduce((obj, key) => { const { defaultValue, parse } = keyMap[key]! - const urlQuery = searchParams?.get(key) ?? null - const queueQuery = getQueuedValue(key) - const query = queueQuery ?? urlQuery + const query = searchParams?.get(key) ?? null if (cachedQuery && cachedState && cachedQuery[key] === query) { obj[key as keyof KeyMap] = cachedState[key] ?? defaultValue ?? null return obj