useSearchParams vs window
Unanswered
Sweat bee posted this in #help-forum
Sweat beeOP
A programmer in my teams was supposed to implement a simple solution where he would check the url for params and accordingly do something (like open a popup). He used window.location.href for this. I asked him why he would not just use the tools nextjs offers him like the useSearchParams hook so he would save a cpl lines of code and he answered, because he would need to wrap the component with suspense to do so and that would not be worth it for such a simple feature... I kinda agree because the way I was introduced with suspense is if I have async calls to an API and have to wait until a certain situation has happened before rendering and show something else, like a loading spinner. Apparently that also implies for getting search params. Ok makes sense, but If I have a lot of state in my address bar and I need that state in a lot of my components I would wrap all of them into suspense which makes the code way more uglier... so is it a common practice to use window for such things or is there another argument I should use useSearchParams?!
6 Replies
Cuvier’s Dwarf Caiman
I believe a suspense is really only applicable to a server component, and useSearchParams is a use function, which can only be used on the client-side. As you are using window, you’re probably in a client component already, so I’d just use useSearchParams.
American Crow
One thing i can think of:
window not available on the sever. Don't forget client components still get rendered on both client and server. So he'll have to check for typeof or somth. or run into hydration errors. Which results in the same additional code line as wrapping in Suspense.@Cuvier’s Dwarf Caiman I believe a suspense is really only applicable to a server component, and useSearchParams is a use function, which can only be used on the client-side. As you are using window, you’re probably in a client component already, so I’d just use useSearchParams.
Sweat beeOP
yes but you have to wrap your client component with suspense in your RSC otherwise the entire route would go dynamic (is supposed to be static)
@American Crow One thing i can think of:
`window` not available on the sever. Don't forget client components still get rendered on both client and server. So he'll have to check for `typeof` or somth. or run into hydration errors. Which results in the same additional code line as wrapping in Suspense.
Sweat beeOP
thats correct and he checks typeof, too... in fact he made his own hook for that where he does all the logic which is only used in a client component...
I mean I agree on the suspense wrapping part... but on the other hand I am a bigger fan of using well made features by nextjs
@Sweat bee thats correct and he checks typeof, too... in fact he made his own hook for that where he does all the logic which is only used in a client component...
American Crow
I'm on phone but sounds like he is just re-implementing parts of the useSearchParams hook. Check the original implementation of it you might find some clues there why things are done that way. Anyways I wouldn't re implement parts of it just to avoid a suspense feels like duplication to me