Saving State in the URL — Understanding useSearchParams in React Router

For the past two days, I’ve been working around the same concept, but today I finally understood its improved version — and that made a big difference.

Yesterday, I learned how to save data in the URL and extract it back using useParams. It was interesting because it showed me how React apps can read values directly from the URL instead of only relying on component state.

But today, I explored the next level of the same idea.

The Upgrade: useSearchParams

Instead of using useParams, today I used useSearchParams — another hook from React Router.

At first, I thought it would be almost the same, but it turned out to be more powerful.

Here’s the key difference I noticed:

• useParams

  • Mainly used to read data from the URL
  • Works with route segments like /product/123
  • Good for identifying resources

• useSearchParams

  • Can read AND update data in the URL
  • Works with query strings like ?page=2&sort=asc
  • Feels very similar to useState, but the state lives in the URL instead of memory

This similarity to useState was the moment things clicked for me.

Why This Felt Important

With useSearchParams, I’m not just displaying information from the URL — I can control it dynamically.
That means:

• Filters
• Pagination
• Sorting
• UI preferences

…can all live inside the URL.
This makes the app more shareable, bookmarkable, and predictable.

Revision + Validation

Today wasn’t just about learning something new.
I also revised yesterday’s concept and then explained the entire flow live to Gemini (AI).

According to the feedback I received, my understanding was “excellent.”
That gave me a confidence boost — not because of praise, but because I could explain the logic clearly without confusion.

My Current Understanding

• URL is not just navigation.
• URL can act like persistent state.
• useParams → Read route data.
• useSearchParams → Read + Update query data.
• React Router isn’t only for pages — it’s also for state synchronization with the browser.

I still need more practice, but now the mental model is forming.
And once the mental model is clear, implementation becomes much easier.

Next step: mastering the remaining routing concepts and applying them deeply inside real projects.