# Access the Search Params of a Request in React Router

Used: react-router@7.0.0

The search params, typically called query params, are the part of the URL that comes after the `?`. For example, in the URL `https://sergiodxa.com/tutorials?q=remix`, the search params part of the URL is `q=remix`.

This is commonly used to pass data to the server using the URL, for example when building a search form you can pass the search term or any other filter. Or when building a pagination you can pass the page number and page size, or a cursor.

If you're writing a React Router route that receives a request with search params you can access them using the [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) and [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) APIs.

```ts
import type { Route } from "./+types/route";

export async function loader({ request }: Route.LoaderArgs) {
  let { searchParams } = new URL(request.url);
  let query = searchParams.get("query");
  let products = await getProducts(query)
  return data({ query, products });
};
```

In some cases the search param can be duplicated, one example can be if you're building a filter with checkboxes and you want to allow multiple values for the same filter. In that case you can use the `getAll` method to get all the values for a search param.

```ts
import type { Route } from "./+types/route";

export async function loader({ request }: Route.LoaderArgs) {
  let { searchParams } = new URL(request.url);
  let size = searchParams.getAll("size");
  let products = await getProducts({ size })
  return data({ query, products });
};
```

Another common use case is to get the search params from the client, for example if you're building a search form you can get the search term from the client and pass it to the server.

```tsx
import { useSearchParams } from "react-router";
import { useDeferredValue, useEffect, useState } from "react";

export function Component() {
  let [searchParams, setSearchParams] = useSearchParams();
  let [value, setValue] = useState(() => {
    return searchParams.get("query") ?? ""
  });

  let deferredValue = useDeferredValue(value);

  useEffect(() => {
    setSearchParams({ query: deferredValue });
  }, [deferredValue, setSearchParams]);

  return (
    <input
      type="text"
      value={value}
      onChange={(event) => setValue(event.currentTarget.value)}
    />
  );
}
```