How to Update Query Params in React

Query parameters are name/value pairs that you can add to the end of a URL. They allow you to store data in that URL.

One practical application of query parameters is to store values from a user’s search.

When a user enters a query into a search bar, you should store that query in the URL. For example, if a user searched a list of blogs for posts in the “react” category, the updated URL should look like this: /posts?tag=react.

React provides the useSearchParams hook that helps you read or update query strings.

To get started, create a search bar in App.js.

import { useState } from "react";
export default function App() {
const [query, setquery] = useState('')
const handleChange = (e) => {
setquery(e.target.value)
};
return (





);
}

Remember to follow best practices when using React to get the most out of them.

Next, install React router and add routing to your application. This is a must for the useSearchParams hook to work.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter, Route, Routes } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(



} />



);

Now you can save the queries in the URL as the user types by modifying the handleChange() function.

import { useState } from "react";
import { useSearchParams } from "react-router-dom";

export default function App() {
const [query, setquery] = useState("");
const [searchParams, setSearchParams] = useSearchParams({});

const handleChange = (e) => {
setSearchParams({ query: e.target.value });
setquery(e.target.value);
};
return (





);
}

You can get a single query value using searchParams.get() and passing in the query parameter's name.

const [searchParams, setSearchParams] = useSearchParams({});
const value = searchParams.get('tag')

To get all the query parameters, use searchParams.entries().

const [searchParams, setSearchParams] = useSearchParams({});
const values = searchParams.entries()

This method returns an iterator you can iterate using key/value pairs.

for (const [key, value] of values) {
console.log(`${key}, ${value}`);
}

The key/value pairs are in the order they appear in the URL.

The useSearchParams hook is great for storing search values or any other data as query parameters in a URL.

You can also keep track of search values with the useState hook, but storing them in a query parameter means that people can share them via the URL.