DEV Community

Stephen Gbolagade
Stephen Gbolagade

Posted on

Stop Using Local State for Filters — Here is why

Have you ever lost all your carefully selected filters after accidentally refreshing the page?

It recently happened to me.

I was checking out a website, I filtered the item to the 20th page, then my mobile Hotspot got disconnected because someone called me.

After the call, the page reloaded and I had to start clicking again to get to the 20th page where I stopped.

What does this mean?

This means your company could be losing a lot of money due to this simple performance issue.

Or, how about a scenario in which you wanted to share your filtered search results with a friend but couldn't?

That's the problem with local state filtering.

Think of shopping on Amazon or any popular e-commerce website you know. Notice how you can:

  1. Apply multiple filters
  2. Share the exact product search with others
  3. Bookmark specific searches
  4. Go back to previous searches using browser buttons

That's all URL parameters in action!

Why URL Parameters Are Better than Local State:

— State persistency for Better UX

Whatever that happens, either a network glitch or an accidental reload, the state of your filtered or paginated data remains whenever the page is up again.

— Sharable link with filters

Of course, since the data state is kept in the URL, you can easily share it with anybody and they will see exactly what you want them to see.

Instead of: "Hey, select electronics, then set the price range to $100-500..."

Just share: yoursite.com/products?category=electronics&price=100-500

— SEO Benefits 🔍

Search engines can find and index your filtered pages. More visibility, more traffic!

I recently searched for a property with a keyword like this: 'Mini flat in Lagos', and one of the results I got on Google landed me on a filtered search result page showing me all available mini-flats in Lagos available on the property listing website.

Cool right?

— Easy & Fast Browser Navigation ⚡

Want to go back to your previous filter combination? Just hit the back button - it works

NOTE: This isn't about preference but building better, more user-friendly applications. Your users will thank you, and you'll save yourself from countless headaches!

Filter params code sample

Top comments (0)