fix: Race condition with navigation

Use `useInsertionEffect` to subscribe to navigation events
rather than `useEffect`, which can happen too late.

Add demo that cycles between various types of components to test.

See #343 (comment)

src/app/app/routing-tour/_components/parsers.ts

@@ -0,0 +1,4 @@
+import { parseAsInteger, parseAsString } from '../../../../../dist/parsers'
+
+export const counterParser = parseAsInteger.withDefault(0)
+export const fromParser = parseAsString

src/app/app/routing-tour/_components/view.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import Link from 'next/link'
+import { useQueryState } from '../../../../../dist'
+import { counterParser, fromParser } from './parsers'
+
+type RoutingTourViewProps = {
+  thisPage: string
+  nextPage: string
+}
+
+export const RoutingTourView: React.FC<RoutingTourViewProps> = ({
+  thisPage,
+  nextPage
+}) => {
+  const [counter] = useQueryState('counter', counterParser)
+  const [from] = useQueryState('from', fromParser)
+  return (
+    <>
+      <Link
+        href={`/app/routing-tour/${nextPage}?from=${thisPage}&counter=${
+          counter + 1
+        }`}
+      >
+        Next
+      </Link>
+      <p>Came from: {from}</p>
+      <p>This page: {thisPage}</p>
+      <p>Next page: {nextPage}</p>
+      <p>Counter: {counter}</p>
+    </>
+  )
+}

src/app/app/routing-tour/a/page.tsx

@@ -0,0 +1,10 @@
+import { Suspense } from 'react'
+import { RoutingTourView } from '../_components/view'
+
+export default function PageA() {
+  return (
+    <Suspense>
+      <RoutingTourView thisPage="a" nextPage="b" />
+    </Suspense>
+  )
+}

src/app/app/routing-tour/b/page.tsx

@@ -0,0 +1,10 @@
+import { Suspense } from 'react'
+import { RoutingTourView } from '../_components/view'
+
+export default function PageB() {
+  return (
+    <Suspense>
+      <RoutingTourView thisPage="b" nextPage="c" />
+    </Suspense>
+  )
+}

src/app/app/routing-tour/c/page.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import { RoutingTourView } from '../_components/view'
+
+export default function PageC() {
+  return <RoutingTourView thisPage="c" nextPage="d" />
+}

src/app/app/routing-tour/d/page.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import { RoutingTourView } from '../_components/view'
+
+export default function PageD() {
+  return <RoutingTourView thisPage="d" nextPage="a" />
+}

src/app/app/routing-tour/start/client/page.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import Link from 'next/link'
+
+export default function ServerStartPage() {
+  return (
+    <ul>
+      <li>
+        <Link href="/app/routing-tour/a?from=start.client">a (server)</Link>
+      </li>
+      <li>
+        <Link href="/app/routing-tour/b?from=start.client">b (server)</Link>
+      </li>
+      <li>
+        <Link href="/app/routing-tour/c?from=start.client">c (client)</Link>
+      </li>
+      <li>
+        <Link href="/app/routing-tour/d?from=start.client">d (client)</Link>
+      </li>
+    </ul>
+  )
+}

src/app/app/routing-tour/start/server/page.tsx

@@ -0,0 +1,20 @@
+import Link from 'next/link'
+
+export default function ServerStartPage() {
+  return (
+    <ul>
+      <li>
+        <Link href="/app/routing-tour/a?from=start.client">a (server)</Link>
+      </li>
+      <li>
+        <Link href="/app/routing-tour/b?from=start.client">b (server)</Link>
+      </li>
+      <li>
+        <Link href="/app/routing-tour/c?from=start.client">c (client)</Link>
+      </li>
+      <li>
+        <Link href="/app/routing-tour/d?from=start.client">d (client)</Link>
+      </li>
+    </ul>
+  )
+}

src/lib/sync.ts

@@ -27,17 +27,20 @@ export function usePatchedHistory() {
     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.`
           //

src/lib/useQueryState.ts

@@ -222,16 +222,18 @@ export function useQueryState<T = string>(
   // console.debug(`render ${key}: ${internalState}`)
 
   // Sync all hooks together & with external URL changes
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     function syncFromURL(search: URLSearchParams) {
       const value = search.get(key) ?? null
       const v = value === null ? null : parse(value)
       // console.debug(`sync   ${key}: ${v}`)
       setInternalState(v)
     }
+    // console.debug(`Subscribing to sync for \`${key}\``)
     emitter.on(key, setInternalState)
     emitter.on(SYNC_EVENT_KEY, syncFromURL)
     return () => {
+      // console.debug(`Unsubscribing from sync for \`${key}\``)
       emitter.off(key, setInternalState)
       emitter.off(SYNC_EVENT_KEY, syncFromURL)
     }