We've really come full circle. State belongs in the URL. That's the power of a website. This reminds me of the MVC days.

@JayDoge

9 ай бұрын

Depends on the case. For search parameters yes, it improves UX and the ability to share the page with your filters.

@muratcemyalin

9 ай бұрын

thats my response when i first saw SSR.. going back full circle to PHP

@jrmc732

9 ай бұрын

That never changed a part of the state always belonged to the URL, the issue is young people never learned it right in the first place, that's not a framework issue that's a learning issue.

@turolretar

9 ай бұрын

All of this exists so that the top developers can earn fat stacks of money. And even those at the bottom can get some crumbs and scraps. It’s utterly pointless to be real, to the point of it being so ridiculous, that the whole point was missed by a mile from the start

@omomer3506

9 ай бұрын

Something something state us stored in the balls..... But yeah we have come full circle. But just to philospoize for a second, now we know why things were done in a certain way and its benefits But more so i keep thinking , are all these techniques just the best it could have ever been given the state of how we use the web and internet,

Server actions, and now this, we're really going back and thinking we're inventing something new

@allahrakha1309

9 ай бұрын

For the sake of reactivity in UI , we are going to 90s era.

@ScytherDOTA

9 ай бұрын

My thoughts exactly 10 seconds into video. "iF yoURe uSiNg StaTe uR doiNg iT WrOnGNG XD". cringe

@robadobdob

9 ай бұрын

As a web dev from the 90’s, it’s amusing seeing all these videos acting like they discovered something new.

@jfgabriel

9 ай бұрын

100% agree.

@justpatrick_

9 ай бұрын

​@@ScytherDOTAits the goto for react "experts"

We recently worked on this a lot of times in the project we are currently working, where we require to implement a filter for a set of records. The values are taken from a form and set to URL, and an useEffect was added for change in search params to call the necessary API. A lot of hassle was required to put the values from the URL back to the form when the page is refreshed.

Thanks for the video. Two days back I want through a detailed tutorial to build a simple Contacts from using the Remix framework; So watching this video I kind of revisited the concept of querystring (search params) approach of saving state.

Awesome video! I use this technique for all sorts of things, but never thought about the url replace optimization, that's clever. I have a hook (NextJS) that handles this for me, I'm just gonna add url replacement logic. Thanks, Kyle!

it's not the first time when i working on something and Kyle gives me an advise i need. thanks for help

Just note, there are limits for the maximum allowed URL length in the address bar of browsers. This varies vastly between browsers.

@risitas5874

9 ай бұрын

Yes, for this reason it's often better to store this state on a backend and just return a short ID that you append to the URL.

@TakeOnMe5

9 ай бұрын

@@risitas5874 Not sure if that's often better but at least that would be one way, yes.

@nathanmurphy8211

9 ай бұрын

​@@risitas5874yep, I'm surprised this wasn't mentioned in the video.

@MasayaShida

9 ай бұрын

​@@risitas5874could you give a simple example of that please. Thank u

@zakariabougroug2687

9 ай бұрын

Or to use a state management tool for unauthorized users

Converted my project over to this approach last night. It was the solution I didn't even know I needed. Thanks! I need to do some refactoring now as this approach results in some repetitive snippets of code since I have a few panels you can switch between and I want all search terms to be stored in the URL.

@angelicking2890

9 ай бұрын

yeah I was looking for something like this for filtering.

Great Vid! Short and straight to the point

thank you for simplifying the web for me, now I can start building my dream project

I just recently implemented this on one of the projects. Quite useful!

A small Feedback:- Your videos are indeed amazing but it would be better if you make videos keeping in mind about production level code and real world programming as this method in the video is only applicable to my "contact us" form. But generally all other forms I have worked on are not simple and doesn't only contain 2-3 text field. The point here I want to make is I like you explanation and that is why I need you to make some intermediate to advance videos about production and real world project programming. Keep going.

@isyedaliraza

9 ай бұрын

If he does it the tutorial video will be 10 hours long

@MayankMishra-oy5xe

9 ай бұрын

@@isyedaliraza I mean like people who are working and have exp. of 2-3 years needs some brief but not very literal videos on real production level programming stuffs as they can watch 20-30 minutes of content each day.

@someonewhowantedtobeahero3206

9 ай бұрын

He publishes those in the form of courses, and you gotta buy them. Quality comes at a price

@MayankMishra-oy5xe

9 ай бұрын

@@someonewhowantedtobeahero3206 I know about it but I think you haven't seen the course catalogue or my feedback comment. The courses he sells are for beginners but not for intermediate to advance level.

@DryBones111

9 ай бұрын

@@MayankMishra-oy5xeSurely if you have 2-3 years experience you would know how to translate a concept shown in a simple example to something more complex.

I'm happy to see all the hype search params is getting!

I totally forgot about this hook! I recently faced similar dilemma with my custom data table component, but didn't have the time to look into it. I already use Zod and React Router, so it's going to be a piece of cake.

Loved the approach thank you:)

Great topic to explore!

Thanks for your video, and make me think more about usage about it.

very nice, i'll def use this for my projects

Great short video! Cheers!

Thanks! It is useful in Next.js server components when you need some state but don't want "use client"

Thankyou, great explanation.

Nice, simple and clear sir

great work bro. learned a new thing

Awesome explanation 🙏

Thanks, this is really a good idea 👍

Great concept!

cool, will use that in the current project ;)

Great but come on, this is how search pages were made 15-20 years ago during Vanilla PHP era. Query params in url. Sometimes I feel we (on the web) "rediscover" old ways of doing things and pretend we invented something revolutionary.

@Andreas_Mann

9 ай бұрын

Yeah true. And often this is just completetely unneccessary too. React is already a mess without all these bells and whistles. And having the URL update in real time is just a no-no for me.

@ItisOsos

9 ай бұрын

Same with the "new" server side rendering. Those thoughts are the problem of new developers (including me of course). We don't usually know how things worked before react, angular and vue. So we must be cautious with what we said and listen to the people with many years of experience.

@JamesW6179

9 ай бұрын

That's why it's "Has Been There All Along".

@gosnooky

9 ай бұрын

Yup. It's like this startup idea someone had about Spotify, but selected playlists playing on "channels", and people were like "Congratulations. You've just invented radio".

@developerAKX

9 ай бұрын

I have been working in react for 5 years but I am using the URL from the start

Que buenos videos chabón!!!❤

Awesome video!

Amazing video!

Thanks! Very nice!

I love it when we keep going in circles

Man, thanks for sharing!!

Bytegrad yt channel uploaded a video on the same topic a few days ago yeah it's good to use the query parameter he shows some more cool techniques with Nextjs btw nice video

@personzen8028

9 ай бұрын

That's what i noticed too

@TariqSajid

9 ай бұрын

i was thinking the same someone already a made video on this topic

@vittoopugliese

9 ай бұрын

this is not the first time he upload the same topic after Bytegrad LOL

@kale_bhai

9 ай бұрын

Content leech

Great thanks

i learnt a lot of these things by watching other sites like Jira work and learnt the hard way. I am thinking it is good to watch some tutorials as well. That replace: true was a new use case for me. Never took care of that.

I wish I would have known how important it is to not have possibly diverging states between backend-react-html without the mistakes that made me come to this company is conclusion myself. Search params are a nice way to reduce state complexity.

@dzienisz

9 ай бұрын

how it's better that useState?

@DryBones111

9 ай бұрын

If you send HTML to the client then you don't have to worry about this problem at all.

This is actually very true. URL-driven applications are just how web was meant to be from the start and SPA fucked that up pretty bad.

Exactly the relevant stuff. This is premium content.

@MubashirullahD

9 ай бұрын

@@roodood I was building a SAAS aplication and you guessed it, using state to remember what filters applied. Making the url dirty wasnt attracted to me but it seems it was the preferred approach. It might be simple and basic but thats all thats needed. So knowledge thats relevant to work is premium.

Great video + Awesome Solution! 😉🔥

daxx, although i'm a backend developer only, but i know this is soso useful

Amazing

Thanks

Nice Brother

Did you copy this from the other youtuber?

@MsVsmaster

9 ай бұрын

I thought the same, the other guy showed exactly the same but with a better UI.

@nikilragav

9 ай бұрын

Who's the other guy

holy shit. WHy is this something I learned only now

Killer and short!

Thank you, more trick about react router v6 woahh

Awesome

Interesting, ByteGrad just put out a video on this a few days ago. coincidental timing, or a query prams just making a comeback right now? or another reason maybe 🤔

@ajfalo-fi3721

9 ай бұрын

Everyone is a copycat and they're looking for views

@neilmerchant2796

9 ай бұрын

@@ajfalo-fi3721 I don't want to make any assumptions and I am a big fan of WDS. and I will grant that query params are a useful tool, just strange to see it framed in this specific way Rrght after another up and coming web dev KZreadr has done the same.

I knew about this hook before, but I hesitated to use it anyhow. Now as I see and understand, how this approach spices my page up. There is nothing left for me than to sit infront of my PC and to make some changes in my code.

it's funny to write that because managing states with query parameters is the most oldest way to do it and until front-end frameworks everyone makes it with that way. This is a confession for how front-end frameworks sucks i guess.

Videos like this are a good reminder why PHP never dies to this day. Maybe they got it right all along - use URL as state, use sessions not JWT, use MySQL for DBs (there's Strapi in the React world for that). 😂 Anyway, thanks Kyle for this video. I still think it's quite informative for those who've never been into PHP.

@karlstein9572

9 ай бұрын

You seem to not understand the difference between JWT and session, first one can be used cross domain, the other cannot... Also all the state cannot and should not be stored in the URL, just what you need like filters. About the database choice, it always depend on what you need and what you can afford, it's not just "use X DB", also PostgreSQL is a more advanced DB and free like MySQL/MariaDB.

@Thassalocracy

9 ай бұрын

Oops, somebody doesn't know tongue in cheek when he sees it... 😛

@karlstein9572

9 ай бұрын

@@Thassalocracy Apologies if your comment was ironic, it is not really obvious.

I’d love for you to do one of these but the state value be an array instead of a simple string. I’m struggling with how to use this process with more complex data

@HumayraSheikh1

7 ай бұрын

f

It would be really great if you can teach us how to make our own rich text editor as a notion editor (example Editor.js).

This is a great feature. How would we go about hiding the information displayed in the URL for security purposes?

@cultofleda

9 ай бұрын

Just don't put sensitive information into the URL in the first place

Good insight.. btw http should be stateless right?

youtube url has an encoded query param, how does it work? Is it handled in FE or BE to encode/decode it?

some of the comments a bit crazy - remembering that not all of us started/even started learning pre react , I mostly now learned react - no idea about jquery and previous , i had made 1 purely html/js/css project for university but never done a project since in pure html/js/css. this to me sounds like an option but it seems that it has more specific use cases

The React world really is something different. Just wow.

I've never seen the `prev.get("propertyname")` in JavaScript. is it a new method? or is it a custom one? or did I miss it?

thank you - well done!

Wow Homelander started teaching webdev

I'd like to see how y'all approach this problem when you gotta load select dropdown with i18n, everytime I had to implement something like this, it looked ugly lol

What keyboard and switches do you use?

Good

I'd only use the URL parameters for filtering purposes personally. I do not believe that state belongs in the URL to a much greater extent than that. There are a few neat things you can do here and there, but keeping all state in the URL is not a good approach. Using an identifier is part of filtering, just as a side note, so ?id=abc123 would still valid in this regard. You could have the identifier as a part of the actual URL and not just a parameter, but that's nothing more than an implementation detail.

Are you using a BrowserRouter? Surely there’s a lot more to it in prod as you can’t just refresh / paste in the url and get the router to take you back to the correct route? (404 scenario) Would you handle state on your server? Or use a HashRouter?

Brilliant idea, use it on tax forms, credit card payments and login screens.

@ajfalo-fi3721

9 ай бұрын

Can't wait 😍😍

@spythere

9 ай бұрын

As it was mentioned, it's for FILTERING DATA, not for AUTH.

@golden_smiles

9 ай бұрын

@@spythere So, I can't use it on ANY FORM, only on FILTERS THE DATA?! That sucks.

your thumbnail looks very similiar

does this rerender everything? or just related components?

How to implement with NextJS app router? putting router.replace in onChange makes slow...

what’s the idea of this if you’re using a “state” like hook. it would be a client component on next too

You haven't mentioned that "set state" function of useSearchParams behaves differently from "set state" function of useState hook when it's called multiple times during the same render cycle

Hi Kyle! how we can add multiple search params in url like " products?category=shirts&color=red&size=lg "

@debanjandey64

9 ай бұрын

You have to destructure the current search param object and then add attributes

With due respect are you sure this can be used as a replacement for state management libraries like redux, jotai, flux etc?

@piyushaggarwal5207

9 ай бұрын

No

@someonewhowantedtobeahero3206

9 ай бұрын

This is only for data filtering purposes, you can't use this elsewhere without compromising security

I would add local state and debounce url update for higher responsiveness

@DobesVandermeer

9 ай бұрын

Have you noticed some kind of slowness with URL updates? They seem pretty fast to me.

lol i implemented this in my codebase like 3 days ago with zustand, just had to add this replace prop for the same result

I just wish browsers handled this better. I often see hundreds of entries in my history, because I typed a couple of words. Of course you can debounce the query update, but it's far from perfect that way.

Anyone know what the .get() method is. Isnt that from a map? Here it is with an object?

Why state should belong to the url? I could simply create a FilterProvider and it will work fine. Why url though?

Brother kyle we need your help , please create video for react native and its complex navigations

We really are returning to monke.

Can you please provide the git hub link for the same?

next best thing to add is testing.. please show that more since it's like 80%of the job anyway

What about the url limitations (how complex it can get)?!

Doesn't this introduce a potential XSS vulnerability? The string value in the `q` parameter is directly bound to the ``s value attribute.

@DobesVandermeer

9 ай бұрын

Not really, the value is assigned using JavaScript property assignment so there's no string escaping issue. In SSR the string will be escaped properly. If you ever wrote the URL to the page without proper escaping you might have an issue but that's not dependent on this technique.

@karlstein9572

9 ай бұрын

React handles (escape) this automatically when rendering, you can try it yourself.

@JohanDG7

9 ай бұрын

There is no two way binding in react :)

can any one say what is the nextjs router equivalent for {replace: true} in setSearchParams?

this is hook import from react or react-router-dom???

@ananthb2435

9 ай бұрын

React-router-dom

@MahmoudAbdullahAnani

9 ай бұрын

@@ananthb2435 thx

Some APIs work like this, with a dependency on https

Nice, need to be care about sensible data :)

Do You sill use xstate?

Isnt this exactly how pages were made way back ?

@ismellpedo

9 ай бұрын

They’re still built like this if you’re not a complete beginner working on pet projects

@MrBrandenS

9 ай бұрын

Yes, it's just another way to manage the state. Pick what works best for you.

hello brother please do some tutorial for backend esspecially node js

Is there another way to persist states between pages?

@AshleyTennyson

9 ай бұрын

redux , contextapi orrr prop drilling kinda

any ideas how to do this in Svelte/SvelteKit?

how to clear q= when input is empty?

are we going back to php now?

Why don't we create a useState wrapper custom hook that initialises state from local storage and make the setState method also update local storage

@derek_d

9 ай бұрын

This is definitely a viable option assuming you don't care about sharing the URL as state.

@petrlaskevic1948

9 ай бұрын

Maybe a lot of unnecessary writes