How to detect query change using next/navigation in shallow mode

[MantasJa]

Hello guys, I would like to ask you how to detect query change using shallow routing and using next/navigation. This example does not work:

'use client'
 
import { usePathname, useSearchParams } from 'next/navigation'
 
function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // Do something here...
  }, [pathname, searchParams])
}

Next.js 14.0.1

Why do I need this? I have few input components used in a search component, and I would like to initiate a server action for updating search results in other component. But at the moment I can not detect route changes.

[franky47]

What version of next are you using? The useSearchParams hook only started to become reactive to shallow updates in 14.1.1, IIRC.

That being said, be aware that in nuqs, there will be two renders when setting a state: one with the internal state update, and one when the URL eventually updates (triggered by a reactive useSearchParams). This may or may not be of relevance for your application.

[MantasJa]

Thank you for your answer, my next.js version: 14.0.1

[franky47]

If you are stuck to this version, you could use the (now deprecated) subscribeToQueryUpdates API from nuqs. It will spy on both shallow and deep updates and will give you the URLSearchParams that have been applied to the URL.

But I'd rather recommend updating Next.js to latest, or at least to >=14.1.1 to have proper support for shallow updates.

[MantasJa]

You were right, after upgrade useEffect works with pahname/useSearchParams dependencies. Thank you