How to share a React Component with the URL

today I want to talk to you about how to make a screen sharable in react and uh to talk about this I've got a little demo here it's a simple table that lets us uh search we can see here we're showing five of a th000 results so this is kind of a server side rendered table I can type in Sam and we can see the results I can type in John and we can see the results and right now this is built um just in react but I can't share this table at all so

uh this URL right here I've updated my search text but if I come into a new tab and paste it we're going to see the default table being rendered so I want to talk about how to make this sharable in the URL um kind of a way that a lot of folks end up doing it which is not the best can get you into a lot of trouble and then we'll talk about um the right way to do it and so uh just to show you real quick the code right now this is a next app but this is all client side data fetching we're using react query right here to uh fetch the

data from this little API route Handler we get the data right here and down here we Loop over it and render the table and for the search input right here we can see that right here whenever we change we are going to set some State this is just react state it lives right here and uh once this gets set because search is a query key for our react query uh it's

going to tell react query to refire it so we can update and fetch the new search results we see we're using it right here this will get rendered and we'll see the new users so every time I type we see the little loading indicator and the table updates uh but like I said we can't share this table at all so um how might we do that well we need to use the URL and uh every time this search changes we might want to push something to the URL something like question mark

search equals Alice so uh this sounds like a good use case for use effect right if we can run an effect every time search changes we should be able to push a new URL and that way we can track the state of our app in the URL so let's try this out um we'll go ahead and grab use effect and if we put search in here then we should be able to run some code every time search changes now this is a next app so we can use the router hook to get

the router and router has a method called push and we can just push uh a new URL with search equals search something like that let's go ahead and autocomplete the dependencies let's give ourselves a little bit more room over here and uh let's try this out okay when I refresh it looks like it adds this automatically so let's just go ahead and say if we have search we'll do this that way we don't don't override

the default here so let's go back to the beginning that looks good and now when I type in S A and M uh we have our URL being pushed so uh this seems to be working um let's go ahead and see if we copy this open a new tab and try to share this well uh maybe it's not working quite yet we see the URL does have our uh search term as the text but the table is not respecting that and that's because our search text defaults

to the empty string so when we first render this page uh we actually want to check if there is a search param in the URL and if so we want to use that for the default value for search and we can do that pretty easily using use search prams this is a hook from next and uh let's go ahead and get pam.get search this is an instance of URL search prams and so this is how you get a specific query pram off of it uh if we