URL Params as State in React (Complete Tutorial)

VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"

In this video I will show you how to use the URL query params as state in React. Using the URL as state is a very powerful solution that allows you to persist state across refreshes, and even send the state along with the URL to someone else! We will also be refactoring a component and following all the design patterns and best practices in React.

[nmanikiran]

Nice and clean explanation.
Note: Max 2048 chars browser url supports

Part 2 with -

1) How to handle multiple values (multi select, checkbox values)
2) Special character consideration
3) range filters etc..

[gauravbawa]

It was always the best thing in my life to always learn how to write clean code

[entrinsek]

As promised i had registered in react project ! I confess that is a game changer still trying to understand deeply what you said and repeating the first and second chapters to memorize the logic and get it flexible in my head to use it frequently in easy way, the only course i had purchased and it matters

[mohamedsalimbensalem]

thank you so much, just it time! iam going to use this on my project because i was using redux for filters

[CLeovison]

Cosdeeeen. Thankyouuu so muuch for thiis 😭😭

[Farruh_]

Why do you almost always publish a video at the same time as Web Dev Simplified does? I've noticed this so many times

[noorulamin]

How can we sanitize and validate the search params before sending them to the backend?

[you-never-know]

Would’ve been nice to see the debounce implementation

[Kevin-kdrf]

What about params validation? Setting the URL as source of truth makes perfect sense, but it also allows any user to manipulate it at will. What if a user edits the search params to a different value? Do you check it? Do you reset to a default value? Do you show an Error? What if they change the category to something that is not of type ProductFilters["category"], BUT is still valid as a query on the backend (like a different category that you didn't want to be selectable in the UI)?

[ardianhotii]

Very nice video, I wanna see how to use the URL as state in a nextjs app with server components where the data fetch happens in the server components and the search "form" is in a client component, the main issue is (or I don't know yet ) how to reftech the data with the new search value or it does automatically when the URL changes

[nourmustafa]

Great topic ❤,
What theme are you using for the editor ?

[richardhaughton]

Thanks for the video. How would this work with tanstack router?

[LehmannMr]

Does this also work if one of the filter strings contains a hash sign or is some additional encoding needed.

[sumanthprabhu]

Is your course Project React video based?

[LehmannMr]

The nuqs library seems to take this even a step further