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

Copy
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

Copy
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

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

Copy
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

Copy
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:

Copy
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:

Copy
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.