How to update a query param using next js 13 app directory

[jeanmayorga]

Summary

In this docs we don't have a way to update the query params, beacuse useSearchParams returns a read-only version of the URLSearchParams interface.

https://beta.nextjs.org/docs/api-reference/use-search-params

Is there a way to this?

'use client';

import { useSearchParams } from 'next/navigation';

  const searchParams = useSearchParams();
  searchParams.delete("page");
  searchParams.set("page", "1");

Additional information

No response

Example

No response

[icyJoseph]

I think one way is to do this is to use the useRouter, usePathname, and useSearchParams hooks, with the URLSearchParams object API.

"use client";

import type { ChangeEvent } from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";

const options = ["mew", "mewtwo", "pikachu"];

export const DropDown = ({ selected }: { selected: string }) => {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const onSelect = (event: ChangeEvent<HTMLSelectElement>) => {
    // now you got a read/write object
    const current = new URLSearchParams(Array.from(searchParams.entries())); // -> has to use this form

    // update as necessary
    const value = event.target.value.trim();

    if (!value) {
      current.delete("selected");
    } else {
      current.set("selected", event.target.value);
    }

    // cast to string
    const search = current.toString();
    // or const query = `${'?'.repeat(search.length && 1)}${search}`;
    const query = search ? `?${search}` : "";

    router.push(`${pathname}${query}`);
  };

  return (
    <select value={selected} onChange={onSelect}>
      <option value="">None</option>
      {options.map((opt) => (
        <option key={opt} value={opt}>
          {opt}
        </option>
      ))}
    </select>
  );
};

[gjakubik]

+1 to this, I was going insane and nuqs saved me. Love the pattern of pushing state to URL so this is a new must have for me!

[TakhirKudusov]

Thank u bro. This thing is working good 👍🏻

[cbovis]

Superbly polished library, great job!

[Bundas]

This doesn't handle the hash part of the URL correctly. Hash should be always after the query string, in this example it will end up in front of query string, rendering it invalid

[franky47]

This doesn't handle the hash part of the URL correctly. Hash should be always after the query string, in this example it will end up in front of query string, rendering it invalid

@Bundas this is handled by nuqs (see test case).

If you're encountering an issue with nuqs and hashes, please open an issue.

[lucasoz]

@icyJoseph how could I do that avoiding page reloading?

[lucasoz]

Temporarily fix:

Adding this in dropdown component

const [scrollY, setScrollY] = useState<number | null>(null);
console.log("scrollY", scrollY);

useEffect(() => {
  const persistentScroll = scrollY
  if (persistentScroll === null) return

  window.scrollTo({ top: Number(scrollY) })
}, [scrollY, searchParams])

and this before router.push

setScrollY(window.scrollY)

[lucasoz]

2023-06-20_09-01-04.mp4

[bennettdams]

@icyJoseph Maybe I'm misunderstanding, but the issue is still the same, no?
Here's a repro with Next.js v13.4.8: https://codesandbox.io/p/sandbox/laughing-sammet-9mx2sd?file=%2Fapp%2FInput.tsx%3A40%2C7

Question 1:

Each key stroke in the input field will trigger a network request (see panel on the right). I guess this has to be done to rebuild the RSC tree on the server from scratch? But is there a way to opt out of that, e.g. when I know that the tree does never rely on the URL search params (so I don't have to rebuild it)?

Question 2:

Assuming we need to rerun the RSC tree, right now each key stroke has to wait for the whole pass. I added an artificial wait to the RSC, now the input is blocked after each key stroke for the duration of the RSC fetch. Even using startTransition does not help here - what is the canonical way to allow instant input without waiting for each RSC pass?

Let me know if this should be considered a bug, gonna create an issue then.

[Solexofficial]

just add it 🚀

router.replace(pathname, { scroll: false });

commit link

[Chasmical]

I wrote my own useSearchParams hook to update the url without triggering a new page request every time. I haven't yet tested how it behaves on a page when useRouter()'s push/replace is used though. For my purposes it works fine atm. (Example usage)

type ReactStateReturn<T> = [value: T, updateValue: React.Dispatch<React.SetStateAction<T>>];
type QueryStringOverridesContext = ReactStateReturn<ReadonlyURLSearchParams>;
export const QueryStringContext = createContext<QueryStringOverridesContext | null>(null);

export function QueryStringOverridesProvider({ children }: React.PropsWithChildren) {
  const params = useNextSearchParams();
  const value = useState<ReadonlyURLSearchParams>(params);
  useLayoutEffect(() => value[1](params), [params]);
  return <QueryStringContext.Provider value={value}>{children}</QueryStringContext.Provider>;
}

export default function useSearchParams() {
  const params = useNextSearchParams();
  const overrides = useContext(QueryStringContext);
  const value = overrides ? overrides[0] : params;

  const updateValue = useCallback(
    (update: (params: URLSearchParams) => void) => {
      if (!overrides) throw new Error("QueryStringOverridesProvider is required to silently mutate search params!");
      const newParams = new URLSearchParams([...value.entries()]);
      update(newParams);

      const paramsStr = newParams.toString();
      const newUrl = location.origin + location.pathname + (paramsStr ? "?" + paramsStr : "");
      window.history.replaceState(window.history.state, "", newUrl);

      overrides[1](new ReadonlyURLSearchParams(newParams));
    },
    [value, overrides],
  );

  return [value, updateValue] as const;
}

[ReangeloJ]

@icyJoseph how could I do that avoiding page reloading?

I used shallow with my router when pushing.

router.push(${pathName}?${updatedSearchParams.toString()}, {shallow: true})

[tar-aldev]

Hm, for me router.push doesn't take shallow option.
only restoreScroll is available. Am I missing smth?

[abdoufma]

Since Newt.js 13, the shallow option is no longer an option in the new router.

[ReangeloJ]

To update a searchParam but leave the others untouched I created a small helper function
type SearchParameterTypes = 'modalOpen' | 'tab';

function updateSearchParam = (searchParams: ReadonlyURLSearchParams, param: SearchParameterTypes, value: string) {
const currentSearchParams = new URLSearchParams(Array.from(searchParams.entries()));
currentSearchParams.set(param, value);

return currentSearchParams;
}

Then to use it I did

const searchParams = useSearchParams();
const router = useRouter();
const pathName = usePathname() || "/"

function handleTabChange(){
if (searchParams?.entries()) {
const updatedSearchParams = updateSearchParam(searchParams, "tab", "online");
router.push(${pathName}?${updatedSearchParams.toString()}, {shallow: true})
}
}

[pbell23]

The validated answer works fine if you're updating params only at one place in your app and without multiple params updating at the same time which was not my case.

So I built a hook using SWR which guarantees that updates are getting the latest state before updating url search params.

For that, I'm using this hook that uses swr to share state across the app. Source for this hook : https://paco.me/writing/shared-hook-state-with-swr

import useSWR from 'swr';

const useSharedState = <T>(key: string, initial: T) => {
    const { data: state, mutate: setState } = useSWR<T>(key, {
        fallbackData: initial
    });

    return [state, setState] as const;
}

export default useSharedState;

I believe you can achieve the same result using React Context are any other global state management library.

Then here is the hook I created :

import { useEffect, useCallback, useMemo } from "react";
import { ReadonlyURLSearchParams, usePathname, useRouter, useSearchParams } from "next/navigation"

import useSharedState from "./useSharedState";

const useSharedSearchParams = (): [ReadonlyURLSearchParams, (key: string, value?: string) => void] => {
    const router = useRouter()
    const pathname = usePathname()
    const searchParams = useSearchParams()
    const initial = useMemo(() => (new URLSearchParams(searchParams.toString())), [])
    const [params, setParams] = useSharedState(`${pathname}-search-params`, initial)

    const updateSearchParam = useCallback(
        (key: string, value?: string) => {
            setParams((prev) => {
                const previousParams = prev?.size ? prev.toString() : undefined
                const newParams = new URLSearchParams(previousParams)
                if (!value) {
                    newParams.delete(key)
                } else {
                    newParams.set(key, value)
                }
                return newParams
            })
        },
        [params]
    )

    useEffect(() => {          // ensure that when component unmounts, shared state gets reset back to initial
        return () => {
            setParams(initial);
        };
    }, [initial]);

    useEffect(() => {
        router.push(pathname + '?' + params?.toString());
    }, [params])

    return [searchParams, updateSearchParam]
}

export default useSharedSearchParams

which can then be used like this in any component :

const AnyComponent = () => {
  const [searchParams, updateSearchParams] = useSharedSearchParams();
  const fooParam = searchParams.get('foo');
  const barParam = searchParams.get('bar');

  const deleteParam = (key: string) => updateSearchParams(key)
  const updateParam = (key: string, value: string) => updateSearchParams(key, value)
  const updateMultipleParam = () => {
    updateSearchParams('foo', 'bar');
    updateSearchParams('bar', 'baz'); // this update will get the latest search params state before updating
  }                                   // which is what we're looking for
  return <div>AnyComponent</div>
}

[V-iktor]

Nice, I assumed Next would handle those for us :/

Did you run the code? Because you are exporting updateSearchParam and importing updateSearchParams

Here is a cleaned up version

Hook

import { useCallback, useEffect, useMemo } from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import useSharedState from "./use-shared-state";

const useSharedSearchParams = () => {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const initial = useMemo(() => new URLSearchParams(searchParams.toString()), [searchParams]);
  const [params, setParams] = useSharedState(`${pathname}-search-params`, initial);

  const updateSearchParam = useCallback(
    (key: string, value?: string) => {
      setParams((prev) => {
        const previousParams = prev?.size ? prev.toString() : undefined;
        const newParams = new URLSearchParams(previousParams);
        if (!value) {
          newParams.delete(key);
        } else {
          newParams.set(key, value);
        }
        return newParams;
      }).catch(() => {
        // If you want to handle errors, add them here
      });
    },
    [setParams]
  );

  const removeSearchParam = useCallback(
    (key: string) => {
      updateSearchParam(key);
    },
    [updateSearchParam]
  );

  useEffect(() => {
    // ensure that when component unmounts, shared state gets reset back to initial
    return () => {
      setParams(initial).catch(() => {
        // If you want to handle errors, add them here
      });
    };
  }, [initial, setParams]);

  useEffect(() => {
    router.push(`${pathname}?${params?.toString()}`);
  }, [params, pathname, router]);

  return { searchParams, updateSearchParam, removeSearchParam };
};

export default useSharedSearchParams;

Exporting an object to be able to import functions by name but not by order ⬆️

Using the hook

export const SomeComponent = () => {
  const { searchParams, removeSearchParam } = useSharedSearchParams();

  const close = useCallback(() => {
    removeSearchParam(queries.login);
  }, [removeSearchParam]);

  const isOpen = searchParams.get("open")

  // ...

[markwoodward23]

This feel needlessly complex vs Next 12, where I could do...

router.replace({
  query: {
    ...router.query,
    tab: 'details'
  }
})

[ilovett]

I am new to next 13, but is this valid so long as you are in a client component?

          const url = new URL(window.location.href);
          url.searchParams.set("q", "farts and ass");
          router.push(url.toString());

[PupoSDC]

This is my favorite solution, but it has a pitfall: it bypasses the next router for param acquisition, which can lead to a troublesome experience when writing tests for code that is mocking the next router.

[sahandghorbani]

[ilovett]

oooh i beat you to the punch by 2 minutes 😛

[Macumba45]

Hello,

I have next-translate working but in local. When i upload to vercel, does not work, only show the key of the common.json but do not translate.

I am getting crazy why in local woprks and in production does not... please help!

[Macumba45]

I used next-intl with locale app, and works perfect now. I guess with next13 i18n.js does not work.

Thanks anyway!

[SalahAdDin]

Working with fetch is pity!

I'm using the search params from the page and it is barely an object, so, to add it as params I have to parse the params to URLSearchParams like this:

export const makeApiRequest = async (
  path: string,
  tags?: string[],
  params?: { [key: string]: string | string[] | undefined }
) => {
  const query = new URLSearchParams(Array.from(params.entries()));
  const url = `${NEXT_PUBLIC_API_URL}${path}${
    !isEmpty(params) ? "?" + query : ""
  }`;

  console.log({ url, params });

  try {
    const res = await fetch(url, {
      next: { revalidate: 3600, tags },
    });
    if (res.ok) {
      const result = await res.json();
      return result;
    }
  } catch (err: any) {
    console.log(err);
  }
};

But it is complaining about types!

  Type '(string | string[])[]' is not assignable to type 'string[][]'.
    Type 'string | string[]' is not assignable to type 'string[]'.
      Type 'string' is not assignable to type 'string[]'.ts(2345)
'params' is possible 'undefined'.ts(18048)
Cannot invoke an object which is possibly 'undefined'.ts(2722)
(method) ArrayConstructor.from<string | string[]>(iterable: Iterable<string | string[]> | ArrayLike<string | string[]>): (string | string[])[] (+3 overloads)
Creates an array from an iterable object.

How to solve this?

[gianmarcodelfreo]

I think this is the best way for n.13

import { useRouter } from 'next/navigation';

router.push(`?tab=${key}`

[sharenz]

This works fine for me:

import { useRouter, useSearchParams } from "next/navigation";

  const router = useRouter();
  const searchParams = useSearchParams();

  const updateQueryParam = (key: string, value: string) => {
    const currentParams = new URLSearchParams(searchParams.toString());
    currentParams.set(key, value);
    router.replace(`?${currentParams.toString()}`, { scroll: false });
  };

[sultondev]

I created a custom hook. And it works fine for me.

Hook:

export default function useQueryParams() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const pathname = usePathname();

  const createQueryString = useCallback(
    (name: string, value: string) => {
      const params = new URLSearchParams(searchParams);
      params.set(name, value);

      return params.toString();
    },
    [searchParams],
  );

  const setQueryParam = (queryName: string, value: string) => {
    router.push(`${pathname}?${createQueryString(queryName, value)}`);
  };

  return { queryParams: searchParams, createQueryString, setQueryParam };
}

How to use:

const { setQueryParam } = useQueryParams();

 function handleChange(value) {
    setQueryParam(paramName, value);
 }

[WillenOLeal]

Hi everyone,

This is how I am doing it on Next.js 14:

const router = useRouter()
const searchParams = new URLSearchParams(useSearchParams()); 

searchParams.set(key, value)
router.push(`?${searchParams}`)

If you want to update the path also:

const router = useRouter()
const pathname = usePathname()
const searchParams = new URLSearchParams(useSearchParams()); 

searchParams.set(key, value)
router.push(`${pathname}?${searchParams}`)

[gurupal]

this won't work on the browser back button click. Stays on the same page, doesn't go back to previous page.

[juanmagalhaes]

The problem I had with:

import { useRouter } from "next/navigation";

...

router.push('/pathname?param=value');

is that it triggers a full route rendering from the server side which I get that sometimes this might be what is desired but in my case I just wanted to open a modal and I wanted it to be purely client side with JS so I needed to create a context that is aware of next navigation and exposes a method that runs native browser history.replaceState.

I wish next 13/14 offered a way to simply do client side navigation if so desired through the router api or some other.

[sugtao4423]

I used useState and the History API because router.push/replace would reload the entire page.

My project hook

'use client'

import { useSearchParams } from 'next/navigation'
import { Dispatch, SetStateAction, useEffect, useState } from 'react'

const QueryParamNames = ['hostId', 'graphId'] as const

export type QueryStates = {
  [key in (typeof QueryParamNames)[number]]?: string
}

export const useQueryStates = (): [
  QueryStates,
  Dispatch<SetStateAction<QueryStates>>,
] => {
  const initParams = useSearchParams()
  const [state, setState] = useState<QueryStates>(
    QueryParamNames.map((key) =>
      initParams?.get(key) ? { [key]: initParams.get(key) } : {}
    ).reduce((acc, cur) => ({ ...acc, ...cur }), {})
  )

  useEffect(() => {
    const params = new URLSearchParams()
    QueryParamNames.filter((key) => state[key]).forEach((key) =>
      params.set(key, state[key]!)
    )
    const url = params.size ? `?${params.toString()}` : ''
    window.history.replaceState(window.history.state, '', url)
  }, [state])

  return [state, setState]
}

How to use

'use client'

const [{ hostId, graphId }, setQuery] = useQueryStates()

/* if you need default values
useEffect(() => {
  if (hostId || graphId) return
  setQuery({
    hostId: 'default-host-id',
    graphId: 'default-graph-id',
  })
}, [hostId, graphId, setQuery])
*/

// some code

<select
  value={hostId}
  onChange={(e) => setQuery({ hostId: e.target.value })}
>

<select
  value={graphId}
  onChange={(e) => setQuery({ hostId, graphId: e.target.value })}
>

Tested

• Do not reload after changing the value.
• The back/forward functions of the browser work correctly.

Versions

• Next.js 13.5.6, React 18.2.0
• Next.js 14.0.3, React 18.2.0

[franky47]

This might work with the experimental flag windowHistorySupport, but otherwise the useSearchParams hook is not reactive to shallow changes, so other parts of the app router may conflict with your code (try navigating with Links, or calling router.refresh() and your search params will be lost).

I encountered and solved these issues (and many other) while building next-usequerystate, which has a similar API to your hook.

[sugtao4423]

My use case was that it only works on the specific page that uses this hook.
If you need the query parameters to be carried over to any page, then my answer is incorrect.

I did not consider router.refresh().
Thank you for pointing that out.

I will gratefully use your library!

[ceIia]

sprinkled some generics in there so you can track all the params you want and still get full type safety:

"use client";

import type { Dispatch, SetStateAction } from "react";
import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";

type QueryParamValue = string | undefined;
type QueryStates<T extends string> = Record<T, QueryParamValue>;

export const useQueryStates = <T extends string>(
  queryParamNames: T[],
): [QueryStates<T>, Dispatch<SetStateAction<QueryStates<T>>>] => {
  const initParams = useSearchParams();
  const [state, setState] = useState<QueryStates<T>>(
    queryParamNames
      .map((key) =>
        initParams?.get(key) ? { [key]: initParams.get(key) } : {},
      )
      .reduce((acc, cur) => ({ ...acc, ...cur }), {}) as QueryStates<T>,
  );

  useEffect(() => {
    const params = new URLSearchParams();
    queryParamNames.forEach((key) => {
      const value = state[key];
      if (value) {
        params.set(key, value);
      }
    });
    const url = params.size ? `?${params.toString()}` : "";
    window.history.replaceState(window.history.state, "", url);
  }, [state, queryParamNames]);

  return [state, setState];
};

and i added a neat little function to update what you need more easily instead of returning the setState directly:

const updateState = (key: T, value: QueryParamValue) => {
  setState((prevState) => {
    const newState = { ...prevState };
    newState[key] = value;
    return newState;
  });
}

[franky47]

Looks neat! If you want to work with other types than strings, and handle rate-limits of the History API (and many more options), nuqs has a similar API: https://nuqs.47ng.com/docs#usequerystates

[rainxh11]

using RSC and URLs is the most overly complicated and still way immature thing i had to deal with

[0xboga]

very on point.

[glanikali]

if anyone is still wondering:

const AdminUserScreen = ({
  logins,
  user,
  tab,
}: {
  logins?: Array<{ checkInTime: Date | string | null; id: number }>;
  user?: User;
  tab?: "user" | "logins";
}) => {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const createQueryString = (name: string, value: string) => {
    const params = new URLSearchParams(searchParams);
    params.set(name, value);
    return params.toString();
  };

  const handleTabChange = (newTab: string) => {
    router.push(`${pathname}?${createQueryString("tab", newTab)}`, {});
  };
  return (
    <Tabs defaultValue={tab ? tab : "user"}>
      <TabsList>
        <TabsTrigger onClick={() => handleTabChange("user")} value="user">
          User
        </TabsTrigger>
        <TabsTrigger onClick={() => handleTabChange("logins")} value="logins">
          Logins
        </TabsTrigger>
      </TabsList>
      <TabsContent value="user">
        <AdminEditUserTab user={user} />
      </TabsContent>
      <TabsContent value="logins">
        <AdminUserLoginsTab barcode={user?.barcode} logins={logins} />
      </TabsContent>
    </Tabs>
  );
};

export default AdminUserScreen;

[abdoufma]

The bigger issue for me is this: why are the URLSearchParams returned by useSearchParams() readonly? if the idea is to simplify dealing with URL params, why does this API offer a (simple and elegant) way to get a value, but no way to actually set one?

What's even more confusing is that a set() method does exist on the interface, but it simply throws an error.

In my opinion, the methods for setting and getting the same piece of state should be more aligned, but as it stands, this API expects you to use both the provided hook as well as the native URLSearchParams API to deal with URL params, which defeats the whole purpose of a simplified API, imo...

[rainxh11]

there's a great library to work with URLs in next called nuqs

[Melancholism]

It's a great library indeed. I was about to migrate my hooks but then I realized it doesn't handle URLSearchParam native arrays (.append and .getAll) and this is a huge feature that I really need to be able to fully migrate to nuqs.

Related issues and discussion.

[SalahAdDin]

@Melancholism Was that issue fixed?

[kellyrmilligan]

I agree with most sentiments expressed in this thread. before I read this thread, I also created basically a wrapper with an interface similar to react routers useSearchParams hook. I too think it would be great to skip the fetch to rsc.

[kellyrmilligan]

import {
  useSearchParams as useNextSearchParams,
  usePathname,
} from 'next/navigation'

interface SetSearchParamsOptions {
  replace?: boolean
}

export type ParamKeyValuePair = [string, string]

export type URLSearchParamsInit =
  | string
  | ParamKeyValuePair[]
  | Record<string, string | string[]>
  | URLSearchParams

/**
 * Creates a new instance of URLSearchParams based on the provided initialization value.
 *
 * @param init - The initialization value for the URLSearchParams object. It can be a string, an array of key-value pairs, a record of key-value pairs, or an existing URLSearchParams object.
 * @returns A new instance of URLSearchParams.
 */
export function createSearchParams(
  init: URLSearchParamsInit = ''
): URLSearchParams {
  return new URLSearchParams(
    typeof init === 'string' ||
    Array.isArray(init) ||
    init instanceof URLSearchParams
      ? init
      : Object.keys(init).reduce((memo, key) => {
          const value = init[key]
          return memo.concat(
            Array.isArray(value) ? value.map((v) => [key, v]) : [[key, value]]
          )
        }, [] as ParamKeyValuePair[])
  )
}
/**
 * useSearchParams
 *
 * A custom hook that returns the current URL search parameters and a function to update them.
 *
 * @returns {[
 *    URLSearchParams,
 *    (
 *      newSearchParams: URLSearchParamsInit,
 *      options?: SetSearchParamsOptions
 *    ) => void
 * ]} An array containing the current URL search parameters and a function to update them.
 */
export const useSearchParams = (): [
  URLSearchParams,
  (
    newSearchParams: URLSearchParamsInit,
    options?: SetSearchParamsOptions
  ) => void,
] => {
  const pathname = usePathname()
  const searchParams = useNextSearchParams()

  const setSearchParams = (
    newSearchParams: URLSearchParamsInit,
    options?: SetSearchParamsOptions
  ) => {
    const urlSearchParams = createSearchParams(newSearchParams)
    const search = urlSearchParams.toString()
    const query = search ? `?${search}` : ''

    if (options?.replace) {
      window.history.replaceState(null, '', `${pathname}${query}`)
    } else {
      window.history.pushState(null, '', `${pathname}${query}`)
    }
  }

  return [searchParams, setSearchParams]
}

[CRIMSON-CORP]

interface TabProps {
  title: string;
  tabKey: string;
  index: number;
  matcher: (string | null)[];
}
function Tab({ title, matcher, tabKey, index }: TabProps) {
  const searchParams = useSearchParams();

  const url = usePathname();

  const searchParam = searchParams.get(tabKey);
  const isActive = matcher.includes(searchParam);

  const urlSearchParams = new URLSearchParams(searchParams);

  if (index === 0) {
    urlSearchParams.delete(tabKey);
  } else {
    urlSearchParams.set(tabKey, title);
  }

  const urlWithParams = url + `?${urlSearchParams.toString()}`;

  return (
    <Link
      href={urlWithParams}
      scroll={false}
      className="relative text-body-grey text-sm font-medium leading-tight tracking-tight py-1.5 px-3"
    >
      <span
        data-active={isActive}
        className="data-[active='true']:text-navy transition-colors duration-300 ease-out font-semibold capitalize"
      >
        {title.replaceAll("-", " ")}
      </span>

      {isActive && (
        <motion.span
          className="w-full h-full bg-navy/10 absolute top-0 left-0 -z-10 rounded-md origin-top"
          layoutId={tabKey}
          layoutDependency={searchParam}
        />
      )}
    </Link>
  );
}

This works as it needs to in my use case

[alamenai]

I implemented this hook:
https://github.com/alamenai/rehook/blob/main/src/hooks/use-query-params.ts

You can read the documentation here :
https://github.com/alamenai/rehook?tab=readme-ov-file#3--usequeryparams