Stop Trapping React State: Sync Your Filters to the URL 🔗

Source: Dev.to

The “Unsharable” Dashboard Problem

Imagine this common B2B SaaS scenario: An executive opens your analytics dashboard. They spend three minutes configuring the data—they filter the status to “Active,” set the date range to “Last 30 Days,” sort the table by “Highest Revenue,” and navigate to Page 4. They copy the URL and Slack it to their team lead.

The team lead clicks the link, but instead of seeing Page 4 of the Active High‑Revenue clients, they just see the default, unfiltered dashboard. The context is completely lost. Why? Because the original developer trapped all of those filters inside React’s useState hooks. When the page reloaded for the team lead, that local state vanished.

The Solution: The URL is the Single Source of Truth

To architect enterprise‑grade frontend experiences at Smart Tech Devs, we follow a strict rule: If a piece of state changes what data is displayed on the screen, it must live in the URL.

By syncing our filters, sorting, and pagination to URL Search Parameters (query strings), we achieve deep‑linkable, shareable, and refresh‑proof dashboards.

Architecting URL State in Next.js (App Router)

Instead of using setFilter(), we manipulate the browser’s History API using Next.js hooks. Here is how we build a filter dropdown that safely updates the URL.

// app/components/StatusFilter.tsx
"use client";

import { useRouter, usePathname, useSearchParams } from 'next/navigation';

export default function StatusFilter() {
    const router = useRouter();
    const pathname = usePathname();
    const searchParams = useSearchParams();

    // Read the CURRENT state directly from the URL, defaulting to 'all'
    const currentStatus = searchParams.get('status') || 'all';

    const handleFilterChange = (newStatus: string) => {
        // 1. Create a fresh URLSearchParams object based on current URL
        const params = new URLSearchParams(searchParams.toString());

        // 2. Set the new parameter (or delete it if resetting)
        if (newStatus === 'all') {
            params.delete('status');
        } else {
            params.set('status', newStatus);
        }

        // 3. Reset pagination to page 1 whenever a filter changes!
        params.delete('page');

        // 4. Update the URL without triggering a full page reload
        router.push(`${pathname}?${params.toString()}`);
    };

    return (
         handleFilterChange(e.target.value)}
            className="filter-dropdown"
        >
            All Statuses
            Active Only
            Archived
        
    );
}

Consuming the URL State in a Server Component

Because the state now lives in the URL, our Next.js Server Components can read it instantly on the initial request. This means we fetch the perfectly filtered data on the server, resulting in zero loading spinners and incredible SEO.

// app/dashboard/page.tsx
import { fetchClients } from '@/lib/db';
import StatusFilter from './components/StatusFilter';

// Next.js automatically passes searchParams to page components
export default async function DashboardPage({ searchParams }: { searchParams: { status?: string } }) {
    const currentStatus = searchParams.status || 'all';

    // Fetch directly from the DB using the URL state
    const clients = await fetchClients({ status: currentStatus });

    return (
        
            
                
## Client Roster

                
            

            
        
    );
}

Conclusion

Local state (useState) should be reserved for transient UI elements like opening a modal or typing in a text field. For everything else—filters, tabs, search queries, and pagination—the URL must be your single source of truth. It is the defining line between a hobby project and a professional, collaborative SaaS platform.