subscribeToQueryUpdates is not reactive when using Next.js v14.0.3

[lamualfa]

Reproduction

https://codesandbox.io/p/devbox/winter-sound-6y9rv3

Preview Code

"use client";

import { useQueryState, subscribeToQueryUpdates } from "next-usequerystate";
import { useEffect, useState } from "react";

function Search() {
  const [search, setSearch] = useQueryState("search");

  return (
    <input
      placeholder="Search"
      value={search ?? ""}
      onChange={(e) => {
        setSearch(e.target.value);
      }}
    />
  );
}

function ResultManualSubcription() {
  const [params, setParams] = useState<URLSearchParams | undefined>();

  useEffect(() => {
    subscribeToQueryUpdates(({ search }) => {
      setParams(search);
    });
  }, []);

  return (
    <p>
      <b>Manual subscription</b>: {params?.get("search")}
    </p>
  );
}

function ResultNextQueryState() {
  const [search] = useQueryState("search");

  return (
    <p>
      <b>Next Query State:</b> {search}
    </p>
  );
}

export default function Page() {
  return (
    <main>
      <section>
        <Search />
      </section>
      <section>
        <h2>Result</h2>

        <ResultManualSubcription />
        <ResultNextQueryState />
      </section>
    </main>
  );
}

Tech Stack

• react 18
• next 14.0.3
• next-usequerystate 1.13.0
• ✅ The app router
• ❌ The basePath option in your Next.js config
• ❌ The experimental windowHistorySupport flag in your Next.js config

[franky47]

Yes, I'm afraid that with recent changes in the app router core, I'll have to deprecate this function. If you turn on the windowHistorySupport flag, the useSearchParams hook becomes reactive to changes in the query string and can be used as a replacement.

[Talent30]

Yes, I'm afraid that with recent changes in the app router core, I'll have to deprecate this function. If you turn on the windowHistorySupport flag, the useSearchParams hook becomes reactive to changes in the query string and can be used as a replacement.

Road to v2?

[franky47]

@Talent30 when the windowHistorySupport flag lands in stable as the default behaviour (which I hope it does), then yes we can remove this function, I'll just flag it as deprecated for now with a link to this issue.

But that's probably quite far down the line, I expect the Next.js team wants to get some folks onboard testing shallow routing first.

[franky47]

This is fixed in Next.js 14.0.4, both with or without the windowHistorySupport flag.

I'll still mark the method as deprecated as it's an internal thing that won't make much sense once proper reactivity of useSearchParams is reached in stock Next.js. See #425.

[github-actions]

🎉 This issue has been resolved in version 1.13.1-beta.1 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 1.13.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀