useState with URLs: persist state with useSearchParams

The React useState hook is a good way to persist state contained in the context of a part in React. This submit demonstrates a easy React hook that shops state within the URL querystring, constructing on high of the React Routers useSearchParams hook.

useState

Utilization of the useState hook seems like this:

const [greeting, setGreeting] = useState('hi there world');

// ....

setTotal('hi there John'); // will set greeting to 'hi there John'

Nevertheless, there’s a drawback to utilizing useState; that state will not be persistent and never shareable. So if you’d like another person to see what you may see in an utility, you’re reliant on them finishing up the identical actions that bought your utility into its present state.

Doing that may be time consuming and error inclined, so wouldn’t or not it’s nice if there was a easy approach to share state?

A stateful URL

An efficient approach to share state between customers, while not having a backend for persistence, is with the URL. A URL can include the required state within the type of the route and the querystring/search parameters. The search parameters are notably highly effective as they’re totally generic and customizable.

Due to the URLSearchParams API, it’s doable to control the querystring with out round-tripping to the server — it is a primitive upon which we are able to construct; so long as the URL restrict (round 2000 chars) will not be exceeded, we’re free to persist state in your URL.

Take into account:

https://our-app.com/?greeting=hello

The URL above is storing a single piece of state; the greeting.

Take into account:

https://our-app.com?greeting=hello&identify=john

The URL above goes additional and storing a number of items of state; the greeting and identify.

useSearchParams

If you happen to’re working with React, the React Router venture makes consuming state within the URL, notably within the type of querystring or search parameters, easy. It achieves this with the useSearchParams hook:

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

const [searchParams, setSearchParams] = useSearchParams();

const greeting = searchParams.get('greeting');

// ...

setSearchParams({ 'greeting': 'bonjour' }); // will set URL like so https://our-app.com?greeting=bonjour - this worth will feed by means of to something pushed by the URL

This can be a nice mechanism for persisting state each regionally and in a shareable manner.

A major good thing about this method is that it doesn’t require posting to the server. It’s simply utilizing browser APIs just like the URLSearchParams API. Altering a question string parameter occurs totally regionally and instantaneously.

The useSearchParamsState hook

What the useSearchParams hook doesn’t do is keep different question string or search parameters.

If you’re sustaining a number of items of state in your utility, that may seemingly imply a number of question string or search parameters. What can be fairly helpful, then, is a hook which permits us the replace state with out dropping different state.

Moreover, it might be nice if we didn’t should first purchase the searchParams object after which manipulate it. It’s time for our useSearchParamsState hook:

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

export operate useSearchParamsState(
    searchParamName: string,
    defaultValue: string
): readonly [
    searchParamsState: string,
    setSearchParamsState: (newState: string) => void
] {
    const [searchParams, setSearchParams] = useSearchParams();

    const acquiredSearchParam = searchParams.get(searchParamName);
    const searchParamsState = acquiredSearchParam ?? defaultValue;

    const setSearchParamsState = (newState: string) => {
        const subsequent = Object.assign(
            {},
            [...searchParams.entries()].cut back(
                (o, [key, value]) => ({ ...o, [key]: worth }),
                {}
            ),
            { [searchParamName]: newState }
        );
        setSearchParams(subsequent);
    };
    return [searchParamsState, setSearchParamsState];
}

The above hook can roughly be regarded as useState<string>; however storing that state within the URL.

Let’s take into consideration the way it works. When initialized, the hook takes two parameters:

• searchParamName: That is the identify of the querystring parameter the place state is persevered.
• defaultValue: If there is no such thing as a worth within the querystring, that is the fallback worth

The hook then goes on to wrap the useSearchParams hook. It interrogates the searchParams for the equipped searchParamName, and if it isn’t current, falls again to the defaultValue.

The setSearchParamsState methodology definition seems considerably difficult, however primarily all it does is get the contents of the present search parameters and applies the brand new state for the present property.

It’s most likely value pausing right here a second to watch an opinion that’s lurking on this implementation. It’s truly legitimate to have a number of values for a similar search parameter. Whereas that is doable, it’s considerably uncommon for this for use — this implementation solely permits for a single worth for any given parameter, as that’s fairly helpful conduct.

With all this in place, we have now a hook that can be utilized like so:

const [greeting, setGreeting] = useSearchParamsState("greeting", "hi there");

The above code returns again a greeting worth, which is derived from the greeting search parameter. It additionally returns a setGreeting operate, which permits us to set the greeting worth. This is similar API as useState, and so ought to really feel idiomatic to a person of React. Large!

Persisting querystring throughout your web site

Now, we have now this thrilling mechanism arrange which permits us to retailer state in our URL and, as a consequence, simply share state by sending somebody our URL.

What would even be helpful is a approach to navigate round our web site with out dropping that state. Think about I’ve a date vary chosen and saved in my URL. As I click on round from display to display, I wish to persist that. I don’t wish to should reselect the date vary on every display.

How can we do that? Properly, it seems to be fairly simple. All we’d like is the useLocation hook and the corresponding location.search property. That represents the querystring, therefore each time we render a hyperlink we simply embrace that like so:

 class="ts language-ts">const [location] = useLocation();

return (<Hyperlink to={`/my-page${location.search}`}>Web page</>)

Now as we navigate round our web site, that state shall be maintained.

Conclusion

On this submit, we’ve created a useSearchParamsState hook, which permits state to be persevered to URLs for sharing functions.