Why useState Isn't Always the Answer: URL State vs React State

There's a simple pattern that can change how you handle UI, help you achieve better performance, maintain SEO, and create a cleaner interface.

The Common Scenario

Imagine this: You have a product list. The user wants to sort by price, category, or newest.

First thought? Use useState:

const [sort, setSort] = useState("latest");

But wait a second...

Does this information really need to live in state? Or should it live in the URL?

The Difference Between the Two

It's like the difference between:

With the first approach, anyone with the paper knows what you want.

With the second, only the waiter knows — and if they forget or leave? Your order is gone.

The Solution: Use URL Parameters Instead of useState

Why is the URL Important Here?

1. 🔍 Transparency

The link expresses the page state:

/products?sort=asc&category=shoes

Users can copy the link and return to the exact same state.

2. 💾 Persistence

If they reload or open the same page in another tab? The same data is displayed — nothing gets lost because you didn't rely on useState.

3. 🚀 Performance & SEO

When you use URL with SSR or SSG — the server can prepare data based on the values. Search engines see the correct content, not just an empty page waiting for JavaScript.

Before vs After

❌ Before (useState)

// Client-side only, lost on refresh
const [sort, setSort] = useState("latest");
const [category, setCategory] = useState("all");
const [page, setPage] = useState(1);

// Data fetching depends on state
useEffect(() => {
  fetchProducts({ sort, category, page });
}, [sort, category, page]);

✅ After (URL Parameters)

// Next.js App Router
import { useSearchParams } from 'next/navigation';

export default function ProductsPage() {
  const searchParams = useSearchParams();
  
  const sort = searchParams.get('sort') || 'latest';
  const category = searchParams.get('category') || 'all';
  const page = searchParams.get('page') || '1';

  // URL is the source of truth
  // SSR can read these values on the server
}

When Should You Actually Use useState?

Rule of thumb: If the state determines the main displayed content, it belongs in the URL.

The Benefits

• 📋 Shareable links — Users can share exact page states
• 🔄 Bookmark support — Save filtered views
• ↩️ Back button works — Natural navigation
• 🔍 SEO friendly — Search engines can index different states
• ⚡ SSR compatible — Server can render correct content

The Bottom Line

1. Before using useState, ask yourself: Should this information be in the URL?
2. Need Pagination, Sort, Filter, Search? Start from the URL, not state.
3. Be smart — not everything needs to be stored in useState.
4. Focus on user experience, not just implementation.
5. React and Next.js support this approach, but few people use it correctly.

Try it in your next project and see the difference yourself!

Interfaces you love, code you understand. 💡