Url as state

Retention of state through url is a lost art, yet with most modern stacks it is not overly complex to set up.

What is it?

Maintaining state with the url is just ensuring that important actions are reflected in the url. This means that if you fully refresh the page or send the link to someone, it should open the exact page you wanted within all of the right menus.

Examples

In a Next.js client component, just utilizing useSearchParams() allows your app to maintain some type of url state. For example, this basic search bar will maintain the user input.

'use client'
 
import { useSearchParams } from 'next/navigation'
 
export default function SearchBar() {
	const searchParams = useSearchParams()
    const search = searchParams.get('search')
    // URL -> `/dashboard?search=my-project`
    // `search` -> 'my-project'
    return <>Search: {search}</>
}

Then, you can send this page to your loved ones and they won’t be confused looking at it for a few seconds like “uhhh why did you send me this?” Working as an SRE, I really appreciate how Datadog does this.

Dashboards get really complicated when you are zoomed into a specific graph at a very specific time based on PST, and Datadog handles this well with standard URL query parameters. Each aspect of the dashboard state like time ranges and template variables are represented as individual query parameters in the URL. This makes it easy to share exact dashboard states with people while keeping the URLs readable and maintainable.