Loading video...

Video Failed to Load

Go Home

URL state is underrated. Here's an example of how we built Next.js commerce with almost zero `useState` calls.

1,113,882 views • 2 years ago •via X (Twitter)

10 Comments

Dominik 🔮's profile picture
Dominik 🔮2 years ago

@nextjs url state is great, but just setting `defaultValue` on the search input will not work if you use the browser back button. The url will change, the component re-renders and you'll se the correct search result, but the value in the search input is out of sync:

Lee Robinson's profile picture
Lee Robinson2 years ago

@nextjs Fixed! Added a key to the input.

Pablo Bermejo's profile picture
Pablo Bermejo2 years ago

@nextjs Am I missing something? I mean, is this new? This has been always the right pattern when you want to preserve state on refresh. Right?

John Rush's profile picture
John Rush2 years ago

@nextjs That’s actually old good web we’ve been doing back in 2010

Tom Lienard's profile picture
Tom Lienard2 years ago

@nextjs Don't forget to wrap components that uses `useSearchParams()` in a `Suspense` boundary, otherwise, your whole page might be sent to the client

Ethan Niser's profile picture
Ethan Niser2 years ago

@nextjs any plans to expose the internal router events for external libraries to tie into search params? was possible in pages, but no longer which is really sad because its super cool

Lee Robinson's profile picture
Lee Robinson2 years ago

@nextjs Have you seen this?

Lance Armah-Abraham's profile picture
Lance Armah-Abraham2 years ago

@nextjs It's something I thought of using and trying to implement for multi step forms, but it would mean that the already filled in (mostly non sensitive data) will be in the url (for client and server data synchronizations). And that's what I am not sure about in terms of security.

Lee Robinson's profile picture
Lee Robinson2 years ago

@nextjs Here's how I'd recommend handling forms!

Will4_U || Damian's profile picture
Will4_U || Damian2 years ago

@nextjs it's 2023, and React developers found out that URL state exists instead of throwing everything into useState that's wild

Related Videos