URL Params as State in React (Complete Tutorial)
ฝัง
- เผยแพร่เมื่อ 21 ก.ย. 2024
- Try Brilliant Free for 30 days + 20% Off Premium Membership → brilliant.org/...
🚀 Project React → cosden.solutio...
📥 Import React (Newsletter) → cosden.solutio...
Source Code → github.com/cos...
Join The Discord! → discord.cosden...
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.
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..
Thank you for your videos, you are the best teacher I have ever seen on TH-cam
It was always the best thing in my life to always learn how to write clean code
Found your channel recently and its one of the best coding channels I've seen so far, keep up the good work.
A feedback for improvement would be to pace your videos a little more, It seems a bit too rushed. Your voice tone and volume is constant, together with the speed at witch you deliver the content, it makes it quite hard to watch long sessions of back to back videos. After one or two videos I usually get sleepy and its quite difficult to maintain focus, so i usually just take a break, to get out of that sleepy state and come back later. Slowing down your speech a little bit to seem more like a conversation than a fast paced lecture would be nice.
Aside from that you are covering really interesting topics that are hard to find on other channels, really enjoyed the video.
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
Happy to hear that! You're taking a great approach. Take your time, learn it properly and you'll learn everything there is to know about React 😄
Nice and clean approach!
thank you so much, just it time! iam going to use this on my project because i was using redux for filters
Thank you Cosden!
Can you make a video with what shortcuts do you use when writing code?
Cosdeeeen. Thankyouuu so muuch for thiis 😭😭
How can we sanitize and validate the search params before sending them to the backend?
Nice your videos are awesome !
u are great love from pakistan
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
Thank you My Friend
Great topic ❤,
What theme are you using for the editor ?
Before watching, great video
Same here. I feel like he is going to get me places
Would’ve been nice to see the debounce implementation
it's not that difficult tbh, it has a useState and useEffect inside with a setTimeout, you can google the snippet and understand it easily
I have a video on it!
When using this method and refreshing the page, the useEffect hook will add "?search" to your url without you have written anything in it. Is it possible to avoid this?
Unfortunatelly there a lot of things missing. Instead of a refactoring video, this would have been better from the ground up. You have to do urlencode/decode to make it reliable and you need to mention that you must sanitize the inputs, etc...etc... Great video as always ofc, but this is not enough to put state in the url safely and correctly
Why do you almost always publish a video at the same time as Web Dev Simplified does? I've noticed this so many times
Maybe because of the Algorithm, His video should pop up in related videos and vice versa
How can the algorithm know when they both will post? lol
really? I had no idea haha. I post Tuesdays and Fridays generally 😁
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)?
Can validate in the setFilters function 11:10
Just like PHP back day
Thanks for the video. How would this work with tanstack router?
The nuqs library seems to take this even a step further
Love your videos
alright cool
Does this also work if one of the filter strings contains a hash sign or is some additional encoding needed.
Urlencode
@@julienjoseph-agathe7447 I just wanted to mention that one probably has to care about it. Otherwise the url will be messed up
Is your course Project React video based?
yeah totally. 80+ videos, but you also get a whole custom app that you build and work in, and the videos guide you step by step!