fix: Patch history before navigation occurs

This introduces an import side-effect, but it makes sure
we catch navigation events before the hooks are mounted.

Switching to a useInsertionEffect would not help here,
since Next.js already made the call to the history API
at the time where the hook first mounts.

In dev mode, there is enough time to patch history before
navigation is triggered, probably due to page build times,
but not in production, where the first ever navigation event
would not hydrate properly.

package.json

@@ -29,7 +29,7 @@
     "useQueryState.gif"
   ],
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": true,
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

src/lib/index.ts

@@ -1,6 +1,6 @@
 'use client'
 
-export * from './defs'
+export type { HistoryOptions, Options } from './defs'
 export * from './deprecated'
 export * from './parsers'
 export { subscribeToQueryUpdates } from './sync'

src/lib/sync.ts

@@ -1,5 +1,4 @@
 import Mitt from 'mitt'
-import React from 'react'
 
 export const SYNC_EVENT_KEY = Symbol('__nextUseQueryState__SYNC__')
 export const NOSYNC_MARKER = '__nextUseQueryState__NO_SYNC__'
@@ -22,40 +21,35 @@ export function subscribeToQueryUpdates(
 
 let patched = false
 
-export function usePatchedHistory() {
-  React.useEffect(() => {
-    if (patched) {
-      return
-    }
-    // console.debug('Patching history')
-    for (const method of ['pushState', 'replaceState'] as const) {
-      const original = window.history[method].bind(window.history)
-      window.history[method] = function nextUseQueryState_patchedHistory(
-        state: any,
-        title: string,
-        url?: string | URL | null
-      ) {
-        // console.debug(`history.${method}(${url}) ${title} %O`, state)
-        // If someone else than our hooks have updated the URL,
-        // send out a signal for them to sync their internal state.
-        if (title !== NOSYNC_MARKER && url) {
-          const search = new URL(url, location.origin).searchParams
-          // console.debug(`Triggering sync with ${search.toString()}`)
-          // Here we're delaying application to next tick to avoid:
-          // `Warning: useInsertionEffect must not schedule updates.`
-          //
-          // Because the emitter runs in sync, this would trigger
-          // each hook's setInternalState updates, so we schedule
-          // those after the current batch of events.
-          // Because we don't know if the history method would
-          // have been applied by then, we're also sending the
-          // parsed query string to the hooks so they don't need
-          // to rely on the URL being up to date.
-          setTimeout(() => emitter.emit(SYNC_EVENT_KEY, search), 0)
-        }
-        return original(state, title === NOSYNC_MARKER ? '' : title, url)
+if (!patched && typeof window === 'object') {
+  // console.debug('Patching history')
+  for (const method of ['pushState', 'replaceState'] as const) {
+    const original = window.history[method].bind(window.history)
+    window.history[method] = function nextUseQueryState_patchedHistory(
+      state: any,
+      title: string,
+      url?: string | URL | null
+    ) {
+      // console.debug(`history.${method}(${url}) ${title} %O`, state)
+      // If someone else than our hooks have updated the URL,
+      // send out a signal for them to sync their internal state.
+      if (title !== NOSYNC_MARKER && url) {
+        const search = new URL(url, location.origin).searchParams
+        // console.debug(`Triggering sync with ${search.toString()}`)
+        // Here we're delaying application to next tick to avoid:
+        // `Warning: useInsertionEffect must not schedule updates.`
+        //
+        // Because the emitter runs in sync, this would trigger
+        // each hook's setInternalState updates, so we schedule
+        // those after the current batch of events.
+        // Because we don't know if the history method would
+        // have been applied by then, we're also sending the
+        // parsed query string to the hooks so they don't need
+        // to rely on the URL being up to date.
+        setTimeout(() => emitter.emit(SYNC_EVENT_KEY, search), 0)
       }
+      return original(state, title === NOSYNC_MARKER ? '' : title, url)
     }
-    patched = true
-  }, [])
+  }
+  patched = true
 }

src/lib/useQueryState.ts

@@ -2,7 +2,7 @@ import { useRouter, useSearchParams } from 'next/navigation'
 import React from 'react'
 import type { Options } from './defs'
 import type { Parser } from './parsers'
-import { SYNC_EVENT_KEY, emitter, usePatchedHistory } from './sync'
+import { SYNC_EVENT_KEY, emitter } from './sync'
 import { enqueueQueryStringUpdate, flushToURL } from './update-queue'
 
 export interface UseQueryStateOptions<T> extends Parser<T>, Options {}
@@ -206,7 +206,6 @@ export function useQueryState<T = string>(
     defaultValue: undefined
   }
 ) {
-  usePatchedHistory()
   const router = useRouter()
   // Not reactive, but available on the server and on page load
   const initialSearchParams = useSearchParams()

src/lib/useQueryStates.ts

@@ -6,7 +6,7 @@ import {
 import React from 'react'
 import type { Nullable, Options } from './defs'
 import type { Parser } from './parsers'
-import { SYNC_EVENT_KEY, emitter, usePatchedHistory } from './sync'
+import { SYNC_EVENT_KEY, emitter } from './sync'
 import { enqueueQueryStringUpdate, flushToURL } from './update-queue'
 
 type KeyMapValue<Type> = Parser<Type> & {
@@ -58,7 +58,6 @@ export function useQueryStates<KeyMap extends UseQueryStatesKeysMap>(
   }: Partial<UseQueryStatesOptions> = {}
 ): UseQueryStatesReturn<KeyMap> {
   type V = Values<KeyMap>
-  usePatchedHistory()
   const router = useRouter()
   // Not reactive, but available on the server and on page load
   const initialSearchParams = useSearchParams()