On The Bike Shed, hosts Joël Quenneville and Stephanie Minn discuss development experiences and challenges at thoughtbot with Ruby, Rails, JavaScript, and whatever else is drawing their attention, admiration, or ire this week.
…
continue reading
Content provided by Frontend First, Sam Selikoff, and Ryan Toronto. All podcast content including episodes, graphics, and podcast descriptions are uploaded and provided directly by Frontend First, Sam Selikoff, and Ryan Toronto or their podcast platform partner. If you believe someone is using your copyrighted work without your permission, you can follow the process outlined here https://player.fm/legal.
Player FM - Podcast App
Go offline with the Player FM app!
Go offline with the Player FM app!
Instant URL search params in Next.js
MP3•Episode home
Manage episode 402170318 series 1635850
Content provided by Frontend First, Sam Selikoff, and Ryan Toronto. All podcast content including episodes, graphics, and podcast descriptions are uploaded and provided directly by Frontend First, Sam Selikoff, and Ryan Toronto or their podcast platform partner. If you believe someone is using your copyrighted work without your permission, you can follow the process outlined here https://player.fm/legal.
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 - Intro
- 1:12 - The problem: In a world of Server Components, URL updates are blocked by a server-side roundtrip
- 10: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 for
- 17:54 - Unwinding our mental model of client-first React apps by thinking about how HTML-only checkout forms work
- 21:44 - The intuition behind React Transitions, and how they put our UI into a state of preparation
- 30:39 - How Transitions improve upon default browser behavior by keeping our current UI 100% responsive, and how useOptimistic solves the checkbox filter panel
- 37: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
199 episodes
MP3•Episode home
Manage episode 402170318 series 1635850
Content provided by Frontend First, Sam Selikoff, and Ryan Toronto. All podcast content including episodes, graphics, and podcast descriptions are uploaded and provided directly by Frontend First, Sam Selikoff, and Ryan Toronto or their podcast platform partner. If you believe someone is using your copyrighted work without your permission, you can follow the process outlined here https://player.fm/legal.
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 - Intro
- 1:12 - The problem: In a world of Server Components, URL updates are blocked by a server-side roundtrip
- 10: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 for
- 17:54 - Unwinding our mental model of client-first React apps by thinking about how HTML-only checkout forms work
- 21:44 - The intuition behind React Transitions, and how they put our UI into a state of preparation
- 30:39 - How Transitions improve upon default browser behavior by keeping our current UI 100% responsive, and how useOptimistic solves the checkbox filter panel
- 37: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
199 episodes
All episodes
×Welcome to Player FM!
Player FM is scanning the web for high-quality podcasts for you to enjoy right now. It's the best podcast app and works on Android, iPhone, and the web. Signup to sync subscriptions across devices.