Listen "Instant URL search params in Next.js"
Episode Synopsis
Sam and Ryan discuss the intuition behind React Transitions, and why React’s new useOptimistic hook is a good fit for building a URL-driven filter panel that stays fully responsive to client interactions.Topics include:0:00 - Intro1:12 - The problem: In a world of Server Components, URL updates are blocked by a server-side roundtrip10:44 - Attempted solution: Use the browser’s Native History API (history.pushState)15:03 - Realization: The source of truth flips from server to client during the transition – which is exactly what useOptimistic was designed for17:54 - Unwinding our mental model of client-first React apps by thinking about how HTML-only checkout forms work21:44 - The intuition behind React Transitions, and how they put our UI into a state of preparation30:39 - How Transitions improve upon default browser behavior by keeping our current UI 100% responsive, and how useOptimistic solves the checkbox filter panel37:46 - Ryan’s take: It’s a bonus when tools make you feel smart, but it’s more important for them to not make you feel dumb
More episodes of the podcast Frontend First
Creating a background gradient from an image
12/12/2024
Exploring useActionState
14/11/2024
Can you self-host Next.js?
10/10/2024
Tom Occhino on the future of React
18/09/2024
Render props
05/09/2024
Controlled and uncontrolled components
28/08/2024
Unstyled React components
15/08/2024
What is a framework?
01/08/2024
ZARZA We are Zarza, the prestigious firm behind major projects in information technology.