How to share a React Component with the URL

Learn how to spot and eliminate duplicate sources of truth in your React apps.

Timestamps:

0:00 - Intro
2:13 - Syncing the URL with useEffect
4:35 - The bug we introduced
6:47 - Why the URL is the source of truth
7:56 - Deriving the search text from the URL
12:07 - How to spot duplicate sources of truth

[Shaker-Hamdi]

Hands down, the best React instructor out there.
I would love if you have a full course on edge cases that I could buy.

[deiminator]

Bro you hit the nail in the head with this one, the problem is, most of the time a search is not only a search, more often you also have extra filters for the query, and pagination, other times you also need to consider the load in the server so you have to add debounce, which a lot of devs won't be able to implement without introducing state.

So that might be a good video idea, a full search tutorial, keep up the good work!

[osamammursleen]

Please add regular videos for these kind of things. Its fun learning from you.

[Pharoxx]

This info is actually useful for any project without relation to React or any other framework. Great job simplifying the problem and explaining it in a way that is easy to understand and solve.

[bizmich_]

It is very important to add a debouncer as well. Otherwise, there will be too many requests to the backend.

[micahscheer]

I appreciate your authenticity and clarity Sam!

[mdrifat]

Long ago you made a video title something like "Lifting State Up" where you might have shown the same logic. But at that time I was new to the React ecosystem and did not want to feel overwhelming. But today I felt the need of this technic and was searching for the video but could not find that as "Lifting State Up" is an established jargon in the react world for almost the same topic.

So, as I already have subscribed you, so I searched for your channel in my subscription list and wala, found that you covered the same topic in your last video also. Thanks a lot.

[CodeWithRomaen]

You are such an awesome educator. It's unreal!

[Ahmad_]

Beautifully explained as always, thanks Sam!

[RonnieDenzel]

Thanks for saving the day again man, this was a lifechanger as i had a bug like this😅

[soumyanilpodder]

Please make more such videos on React and concepts like this. Love the video.

[havefun]

two-way flow and the source of truth explanation is very clear.

[rockNbrain]

nice job Sam, funny enough i did this yesterday at my job!! I'm happy that we're getting state back to the url

[ThugLifeModafocah]

I love your videos, man. Thank you a lot.

[magnuserikkeenrobot]

yay your back <3 will you appear on any conferences this year btw?

[rammehar]

❤ thank you very much, for all the wonderful videos

[PRonYouTube]

Thanks for another great tip, Sam! I wanted to ask about your thoughts on how this might spam the back button history with a lot of intermediary state values, i.e. every keystroke. I know that `router.replace` vs `router.push` might be one possible solution, but let's say we wanted to stick with router.push, but to just have it be less noisy. One compromise might be to avoid updating the URL after every keystroke, and do some sort of debouncing. But here's the catch: Is it possible to keep the UI updates instantaneous (so NO debouncing there), but while having the browser entry be debounced? With this current approach it doesn't seem possible at first glance, and might require separating out the source of truth into two sources again?

[ikbo]

excellent video as usual. What course are you guys currently working on (I am a buildui premium member)?

[zainuldin]

can we also push on un-focus to make back thing work correctly? and let suppose we have more params

[HiteshJangid]

I also implement the same thing with react query and Mui datagrid along with search it also handle the pagination.