Kill Global State: Using URL Search Params Instead

Why Your Users Can't Share Links

The 'Screenshot Problem' that kills collaboration and conversion.

The 'Hotel Lobby' Analogy

• The Scenario — You spend 20 minutes filtering for a 'Sea View, King Bed, Under $200' room.
• The Share — You copy the URL and send it to your partner to check.
• The Disappointment — They click the link and land in the Hotel Lobby (Homepage). All filters are lost.

The Culprit: Hidden State

The browser didn't know about your filters.

• Invisible Data — Your app stored choices in memory (Redux/Context), not in the address bar.
• The Disconnect — The URL says 'Home', but the screen shows 'Search Results'.

The Old Way: Memory State

Treating the browser like a dumb window.

• The Vault — Developers shove filters, sorting, and pagination into a Global Store.
• The Fragility — If the user hits 'Refresh', the memory is wiped clean.
• The Silo — That state lives only on your machine, right now.

The New Way: URL as Truth

The URL is the single source of truth for UI state.

• Visible State — Move state up to the URL: ?color=blue&size=medium&page=2.
• Deserialization — The UI simply reads the URL to decide what to show.
• Synchronization — Changing a filter doesn't update state; it updates the URL.

Superpower #1: Immortality

Surviving the refresh button.

• Persistence — Because state is in the URL, a page refresh changes nothing.
• Bookmarkable — Users can bookmark their complex search configuration for later.

Superpower #2: Time Travel

Fixing the broken 'Back' button.

• Native Navigation — Every filter change is a navigation event.
• The Flow — User clicks 'Back', the URL changes, the UI updates automatically.
• No Custom Logic — Stop writing custom code to handle history stacks.

Superpower #3: Collaboration

Making your app multiplayer-ready.

• Deep Linking — Support sends a link to a user: 'Click here to see the error'.
• Instant Context — The user sees exactly what Support sees. No instructions needed.

Architecture: Unidirectional Flow

How data moves in a URL-first app.

• 1. User Action — User clicks 'Filter by Red'.
• 2. Update URL — App pushes ?color=red to the browser history.
• 3. Component Reacts — Component listens to URL changes and re-renders with red items.

Wait, What Goes Where?

Not everything belongs in the URL.

• URL Params — Anything that defines what is being viewed (Filters, Search, Sort, ID).
• Global State — Data that is private or cross-cutting (User Profile, Auth Tokens, Theme).
• The Rule — If I copy-paste this link, should the recipient see this?

Business Wins (ROI)

Why stakeholders should care about URLs.

• Higher Conversion — Marketing can link directly to 'Red Sneakers on Sale'.
• Better SEO — Search engines can index specific categorized pages.
• Fewer Bugs — Less state synchronization code means fewer edge cases.

The Takeaway

Stop fighting the browser. embrace it.

The URL is not just an address. It's your application state.

Check your current project. Can you refresh the page and keep your place?