useSearchParams in Next.js

useSearchParams is a client-side hook used to read query values from the URL inside interactive components.

What does useSearchParams do?

It lets client components access URL query parameters without reloading the page.

How does it work?

URL:
/products?category=shoes&page=2

const params = useSearchParams();

params.get("category") → "shoes"
params.get("page") → "2"

The hook reads values directly from the browser URL.

Why use useSearchParams?

• Filtering products
• Pagination controls
• Sorting data
• Search inputs

Example Output

Real-World Example

An e-commerce filter panel updates the URL when users select categories. The UI reads those filters using useSearchParams.

Interview Tip

useSearchParams is a client hook for reading URL query values, while searchParams is used in server components.