useParams vs. useSearchParams: Choosing the Right Hook

When working with React Router, developers often need to access URL parameters to extract data and update the page based on user actions. Two important hooks in React Router for handling parameters are the useParams hook and the useSearchParams hook. Choosing between them depends on whether the parameters are part of the route path or exist as query parameters in the URL's query string.

This article explains the differences between these React Router hooks, their use cases, and how they impact routing in a React application. By the end, developers will understand when to use useParams vs. useSearchParams effectively.

Understanding React Router and URL Parameters

Before diving into useParams hook and useSearchParams hook, it's important to understand how React Router manages parameters in a URL.

In React Router, there are two primary ways to pass parameters in a URL:

• Route parameters (Dynamic segments in the URL path)

• Query parameters (Values in the URL's query string)

Route Parameters in React Router

Route parameters are dynamic parts of the URL path that allow rendering different pages based on the parameters. These are often used when dealing with category pages, user profiles, or dynamic content.

Example of Route Parameters

1import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
2import { useParams } from "react-router-dom";
3
4function UserProfile() {
5  let { userId } = useParams();
6  return <h2>User Profile: {userId}</h2>;
7}
8
9function App() {
10  return (
11    <Router>
12      <Routes>
13        <Route path="/user/:userId" element={<UserProfile />} />
14      </Routes>
15    </Router>
16  );
17}
18
19export default App;

​

In this example, when a user visits /user/123, the useParams hook extracts 123 from the URL path, allowing the UserProfile component to display relevant data.

Query Parameters in React Router

Unlike route parameters, query parameters are key-value pairs appended to the URL's query string after a ?. They are useful for passing filter options, search terms, or category selections.

Example of Query Parameters

1import { BrowserRouter as Router, Routes, Route, useSearchParams } from "react-router-dom";
2
3function ProductList() {
4  let [searchParams] = useSearchParams();
5  let category = searchParams.get("category");
6
7  return <h2>Showing products for category: {category}</h2>;
8}
9
10function App() {
11  return (
12    <Router>
13      <Routes>
14        <Route path="/products" element={<ProductList />} />
15      </Routes>
16    </Router>
17  );
18}
19
20export default App;

​

If the URL is /products?category=shoes, the useSearchParams hook extracts the category value, allowing the component to display the corresponding category.

useParams vs. useSearchParams: Key Differences

Feature	useParams Hook	useSearchParams Hook
Parameter Type	Route parameters	Query parameters
Defined In	Route path	URL's query string
Returns an object	✅ Yes, contains key-value pairs	✅ Yes, but provides a utility for manipulation
Common Use Cases	Dynamic pages, user profiles, category-based navigation	Search filters, pagination, dynamic sorting
Modification	Requires navigation to a new route	Can be updated without changing the route

When to Use useParams Hook?

The useParams hook is best when dealing with route parameters inside a URL path. It is useful for handling:

• Dynamic content pages

• User profiles

• Blog posts by category

• Fetching data based on the URL path

Example: Using useParams to Access Route Parameters

1import { useParams } from "react-router-dom";
2
3function BlogPost() {
4  let { postId } = useParams();
5  return <h2>Blog Post ID: {postId}</h2>;
6}

​

This method ensures clean URLs and easy routing.

When to Use useSearchParams Hook?

The useSearchParams hook is ideal when working with query parameters. It is best suited for:

• Filtering category pages

• Handling pagination

• Applying search parameters

• Managing sorting options

Example: Using useSearchParams for Filtering

1import { useSearchParams } from "react-router-dom";
2
3function FilteredProducts() {
4  let [searchParams, setSearchParams] = useSearchParams();
5  let category = searchParams.get("category");
6
7  return (
8    <div>
9      <h2>Products for Category: {category}</h2>
10      <button onClick={() => setSearchParams({ category: "electronics" })}>
11        Electronics
12      </button>
13    </div>
14  );
15}

​

Updating Parameters in React Router

Modifying Route Parameters

To change route parameters, a new route needs to be triggered:

1import { useNavigate } from "react-router-dom";
2
3function NavigateUser() {
4  let navigate = useNavigate();
5
6  return (
7    <button onClick={() => navigate("/user/456")}>Go to User 456</button>
8  );
9}

​

Modifying Query Parameters

For query parameters, updating does not require a new route:

1import { useSearchParams } from "react-router-dom";
2
3function UpdateQuery() {
4  let [searchParams, setSearchParams] = useSearchParams();
5
6  return (
7    <button onClick={() => setSearchParams({ category: "books" })}>
8      Books Category
9    </button>
10  );
11}

​

The Bottom Line!

Choosing between useParams vs. useSearchParams depends on how the parameters are structured in the URL. If the parameters are part of the route path, use the useParams hook. If they are query parameters, the useSearchParams hook is the better choice.

Both hooks help access and manipulate the URL effectively in a React application, improving routing and user experience. Understanding these essential tools is key to building scalable and maintainable react projects.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.