Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

1,113,882 Aufrufe • vor 2 Jahren •via X (Twitter)

10 Kommentare

Profilbild von Dominik 🔮
Dominik 🔮vor 2 Jahren

@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:

Profilbild von Lee Robinson
Lee Robinsonvor 2 Jahren

@nextjs Fixed! Added a key to the input.

Profilbild von Pablo Bermejo
Pablo Bermejovor 2 Jahren

@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?

Profilbild von John Rush
John Rushvor 2 Jahren

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

Profilbild von Tom Lienard
Tom Lienardvor 2 Jahren

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

Profilbild von Ethan Niser
Ethan Niservor 2 Jahren

@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

Profilbild von Lee Robinson
Lee Robinsonvor 2 Jahren

@nextjs Have you seen this?

Profilbild von Lance Armah-Abraham
Lance Armah-Abrahamvor 2 Jahren

@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.

Profilbild von Lee Robinson
Lee Robinsonvor 2 Jahren

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

Profilbild von Will4_U || Damian
Will4_U || Damianvor 2 Jahren

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

Ähnliche Videos