Sam tells Ryan about his experience setting up an in-browser code editor with CodeMirror that he plans on using for blog posts and code recipes, as well as what he thought about using Radix Themes for the first time in earnest on a side project of his currently styled with Tailwind. Topics include: 0:00 - Intro 4:01 - Building an authoring tool with CodeMirror 18:47 - Refactoring Tailwind to Radix Themes Links: CodeMirror Sam’s YouTube video on Radix Themes Radix Themes docs ..read more

Sam and Ryan talk about why it’s better to think of throw as a general-purpose JavaScript language feature rather than something that should only be used for error handling. They discuss the ambiguity around the phrase “error handling”, situations that call for dealing with errors locally vs. globally, and how throw can be useful for non-error control flow. They also discuss the problems with trying to shoehorn dynamic features into a static site. Topics include: 0:00 - Intro 4:07 - Error handling vs. throw-try/catch 23:34 - Errors vs. Exceptions 31:52 - How Next.js uses throw for non-error c ..read more

Sam and Ryan discuss the core values of the Next.js framework, and how those values motivate several of the framework’s design decisions. They talk about caching, why layouts don’t have access to the URL, and why the router doesn’t expose navigation events, as well as how developers should think about extending Next’s functionality with their own application code. Topics include: 0:00 - Intro 2:58 - Why don’t layouts re-render in Next.js? 7:10 - Push-based vs. pull-based rendering 8:56 - Thinking about re-renders in a pure React app 11:07 - Why Server Actions need to call the revalidate* APIs ..read more

Sam talks to Ryan about refactoring an MDX blog post to a React Server Component. They discuss how RSC’s ability to render server-side content with “client-side holes” turns out to replace MDX for many uses cases. They also talk about other tools that are (surprisingly) a conceptual subset of the RSC architecture, such as custom Webpack loaders. Topics include: 0:00 - Intro 5:05 - The Next.js happy path for MDX: Local files 11:15 - Exploring remote MDX content with mdx-remote 14:46 - Separating the serializable parts of MDX from the runtime imports 17:13 - Realizing that RSC covers the same p ..read more

Sam and Ryan read and discuss the latest update from React Labs. Topics include: 0:00 - Intro 5:26 - Opening 6:18 - React Compiler 27:27 - Actions 51:44 - Asset loading 1:13:06 - Next Major Version of React 1:15:42 - Activity Links: React Labs blog post Sam’s video on Strict Mode ..read more

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 m ..read more

Ryan and Sam discuss the purpose and usage of the useOptimistic() hook, a new experimental API from React. Topics include: 0:00 - Intro 2:18 - Problem: RSCs require a server roundtrip before the UI can be updated 10:13 - Solution: useOptimistic() lets you merge ephemeral client-side state with server-side data so you can update the UI during a Server Action or Transition 14:03 - How useOptimistic() avoids the notion of identity by discarding the ephemeral state after the app settles 21:17 - How useOptimistic() lets you safely “fork” state that eventually syncs with the server 27:32 - Handling ..read more

Ryan and Sam discuss the purpose and usage of the cache() function, a new experimental API from React. Topics include: 0:00 - Intro 2:29 - Caching in Next.js vs. React cache() 8:11 - Why React invalidates the cache for each server request 14:43 - How cache() enables colocation of data-fetching code 16:14 - Using cache() to share CPU-heavy or I/O-bound tasks between components 19:31 - Why cache() obviates the need for context in Server Components 23:19 - The danger of module scope on the server 27:54 - Why cache() is implemented with AsyncLocalStorage 41:04 - Why cache() is part of React 48:27 ..read more

Ryan and Sam discuss the purpose and usage of the cache() function, a new experimental API from React. Topics include: 0:00 - Intro 2:29 - Caching in Next.js vs. React cache() 8:11 - Why React invalidates the cache for each server request 14:43 - How cache() enables colocation of data-fetching code 16:14 - Using cache() to share CPU-heavy or I/O-bound tasks between components 19:31 - Why cache() obviates the need for context in Server Components 23:19 - The danger of module scope on the server 27:54 - Why cache() is implemented with AsyncLocalStorage 41:04 - Why cache() is part of React 48:27 ..read more

Sam and Ryan talk about Advanced Radix UI, Build UI’s newest course. They also read and discuss a blog post that describes the RSC architecture in terms of two processes: React Server and React Client. Topics include: 0:00 - Intro 0:49 - Ceilingless libraries + Advanced Radix UI 21:02 - Read and discuss: “RSC is React Server + Component” Links: Advanced Radix UI course Radix UI RSC is React Server + Component ..read more