47ng / nuqs

Type-safe search params state manager for React frameworks - Like useState, but stored in the URL query string.
https://nuqs.47ng.com
MIT License
4.86k stars 104 forks source link

fix(adapters/next): wrap setOptimisticSearchParams in startTransition #729

Closed aryasaatvik closed 3 weeks ago

aryasaatvik commented 3 weeks ago

on next 15 app router. I was getting an error when updating a search param in a form input event handler. wrapping setOptimisticSearchParams with startTransition fixed it

<Input
  placeholder="https://example.com/font.woff2"
  {...field}
  onChange={(e) => {
    setWebFontUrl(e.target.value);
    field.onChange(e);
  }}
/>

error

ConsoleError: An optimistic state update occurred outside a transition or action. To fix, move the update to an action, or wrap with startTransition.
    at handleClientError (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.0.1_react-dom@19.0.0-rc-69d4b800-20241021_react@19.0.0-rc-69d4b800-20241021__react@19.0.0-rc-69d4b800-20241021/node_modules/next/dist/client/components/react-dev-overlay/internal/helpers/use-error-handler.js:41:17)
    at window.console.error (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.0.1_react-dom@19.0.0-rc-69d4b800-20241021_react@19.0.0-rc-69d4b800-20241021__react@19.0.0-rc-69d4b800-20241021/node_modules/next/dist/client/components/globals/intercept-console-error.js:39:56)
    at dispatchOptimisticSetState (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.0.1_react-dom@19.0.0-rc-69d4b800-20241021_react@19.0.0-rc-69d4b800-20241021__react@19.0.0-rc-69d4b800-20241021/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:7206:17)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/nuqs@2.1.0_next@15.0.1_react-dom@19.0.0-rc-69d4b800-20241021_react@19.0.0-rc-69d4b800-2024102_fs2fclt7luqmp6njf5pcuqcefm/node_modules/nuqs/dist/chunk-2Q6GSII2.js:19:5)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/nuqs@2.1.0_next@15.0.1_react-dom@19.0.0-rc-69d4b800-20241021_react@19.0.0-rc-69d4b800-2024102_fs2fclt7luqmp6njf5pcuqcefm/node_modules/nuqs/dist/index.js:407:13)
    at recursiveCompose (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/nuqs@2.1.0_next@15.0.1_react-dom@19.0.0-rc-69d4b800-20241021_react@19.0.0-rc-69d4b800-2024102_fs2fclt7luqmp6njf5pcuqcefm/node_modules/nuqs/dist/index.js:431:20)
    at compose (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/nuqs@2.1.0_next@15.0.1_react-dom@19.0.0-rc-69d4b800-20241021_react@19.0.0-rc-69d4b800-2024102_fs2fclt7luqmp6njf5pcuqcefm/node_modules/nuqs/dist/index.js:439:5)
    at flushUpdateQueue (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/nuqs@2.1.0_next@15.0.1_react-dom@19.0.0-rc-69d4b800-20241021_react@19.0.0-rc-69d4b800-2024102_fs2fclt7luqmp6njf5pcuqcefm/node_modules/nuqs/dist/index.js:406:9)
    at flushNow (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/nuqs@2.1.0_next@15.0.1_react-dom@19.0.0-rc-69d4b800-20241021_react@19.0.0-rc-69d4b800-2024102_fs2fclt7luqmp6njf5pcuqcefm/node_modules/nuqs/dist/index.js:353:42)
    at runOnNextTick (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/nuqs@2.1.0_next@15.0.1_react-dom@19.0.0-rc-69d4b800-20241021_react@19.0.0-rc-69d4b800-2024102_fs2fclt7luqmp6njf5pcuqcefm/node_modules/nuqs/dist/index.js:368:21)
    "react": "19.0.0-rc-69d4b800-20241021",
    "next": "15.0.1",
vercel[bot] commented 3 weeks ago

@aryasaatvik is attempting to deploy a commit to the 47ng Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] commented 3 weeks ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
nuqs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 31, 2024 6:52am
pkg-pr-new[bot] commented 3 weeks ago

Open in Stackblitz

pnpm add https://pkg.pr.new/nuqs@729

commit: c9b523a

github-actions[bot] commented 3 weeks ago

:tada: This PR is included in version 2.1.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket: