Viewing docs for an older release. View latest
useSearchParams
On this page

useSearchParams

Returns a tuple of the current search params and a function to update them. Setting the search params causes a navigation.

import { useSearchParams } from "@remix-run/react";

export function SomeComponent() {
  const [searchParams, setSearchParams] = useSearchParams();
  // ...
}

Signature

const [searchParams, setSearchParams] = useSearchParams();

searchParams

The first value returned is a Web URLSearchParams object.

setSearchParams(params)

The second value returned is a function to set new search params and causes a navigation when called.

<button
  onClick={() => {
    const params = new URLSearchParams();
    params.set("someKey", "someValue");
    setSearchParams(params);
  }}
/>

setSearchParams((prevParams) => newParams)

The setter function also supports a function for setting new search params.

<button
  onClick={() => {
    setSearchParams((prev) => {
      prev.set("someKey", "someValue");
      return prev;
    });
  }}
/>
Docs and examples licensed under MIT