useSearchParamsReturns 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();
// ...
}
const [searchParams, setSearchParams] = useSearchParams();
searchParamsThe 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;
});
}}
/>
