Frontend First

Sam and Ryan talk about the motivation behind the changes to Strict Mode in React 18, and in particular why React simulates an immediate unmount and remount by re-running component effects. They also talk about the tradeoff between database consistency and speed.

Topics include:

• 0:00 - Intro
• 1:12 - The tradeoff between data that’s fast but stale, vs. data that’s slow but consistent
• 11:55 - Strict mode in React 18, the proposed Offscreen API, and the implications for internal vs. external state in Concurrent React

Links:

• Xata
• New Strict Mode behaviors in React 18

Sam and Ryan share their experiences building with Remix for the very first time. Sam built a simple exercise tracking app using the Indie starter stack, and Ryan built a blog using server rendering in both Remix and Next.js, and talks about the differences between the two frameworks. They both discuss what the larger React community can learn from the ideas that Remix has to offer.

Topics include:

• 0:00 - Intro
• 2:33 - Sam’s Remix app
• 6:34 - The Indie stack
• 19:36 - Creating the data model in Prisma, a form, and an index route
• 25:48 - Ryan building the same Blog app in Remix and Next.js
• 32:33 - Using onSubmit vs. posting an HTML Form
• 39:15 - Remix’s fetcher API
• 46:46 - Borrowing declarative abstractions
• 56:18 - What did we give up when we left the PHP model of building websites? Did we throw the baby out with the bathwater?

Links:

• Remix
• Sam’s YouTube video on Remix
• Kent C Dodds on JS Party
• Fly.io
• Hasura guide on Remix and Firebase

Sam and Ryan chat about Remix and the differences between data fetching and mutations on the client vs. the server. They also talk about whether a framework’s APIs or the actual apps it enables developers to build are more important when choosing which tool to use.

Topics include:

• 0:00 - Intro
• 2:17 - What matters more to developers when choosing a framework: their experience using the APIs, or what they can build with it?
• 18:38 - Remix and data fetching on the client vs. the server
• 36:36 - Does running code on the edge really matter for day-to-day developers?

Links:

• Ryan Florence’s tweet on speakers vs. music
• Sam’s video on building an iOS scaled background modal effect

Sam and Ryan chat about adding authentication-based route guards to Next.js, tradeoffs between one-shot data loading vs. reactive pages in React apps, and instrumenting errors with Sentry.

Topics include:

• 0:00 - Intro
• 8:07 - Auth-based route guards and synchronized spinners in Next.js
• 26:34 - Tradeoffs of loading once on render vs. fully reactive pages
• 42:30 - Ryan’s video on Deploy notifications
• 47:45 - Errors + stale auth + Sentry

Links:

• Fixing Twitter's loading screen using Synchronized Animations in React
• SWR
• Sentry

Sam and Ryan talk about why Suspense for Data Fetching isn’t ready yet, and how both it and the Server Components feature of React 18 rely on the ability to evict a cache that’s internal to React. They also talk about Transitions.

Topics include:

• 0:00 - Intro
• 5:19 - Using startTransition with a router
• 9:36 - How React 18 yields
• 21:37 - Why both Suspense for Data Fetching and Server Components need a way to invalidate React’s cache
• 37:24 - How Server Components can remove the need for explicit API calls without sacrificing any of React’s composability
• 1:01:00 - Real-world problems concurrent features address
• 1:03:20 - Moving state from React to the URL

Links:

• Sam’s video: How to remove loading spinners in Next.js
• Ryan’s video: Transitions that Suspend
• React Server Components
• React Working Group - React 18
• React Server Components and Remix

Sam and Ryan chat about the differences between building internal apps vs. public websites, and why public sites get talked about more on forums like Twitter. They also talk more about their experiments with Suspense and Transitions in React 18.

Topics include:

• 0:00 - Intro
• 2:35 - How to trigger Suspense by accessing an unresolved promise
• 11:04 - Tension between flexibility of Transitions and Suspense vs. best practices around data fetching
• 21:00 - Semantics of React APIs when using Concurrent features
• 24:12 - How internal tools differ from public websites
• 43:24 - Sam’s next vid: Reducing loading spinners on route transitions in Next.js
• 45:28 - Ryan’s next vid: Demo of startTransition

Links:

• Concurrent UI Patterns (Experimental)

Sam and Ryan talk about using Promises and state libraries like Valtio to cross the bridge from changing module scope to React component state. Ryan also talks about writing an end-to-end Cypress test that verifies image uploads to S3.

Topics include:

• 0:00 - Intro
• 1:50 - Using Promises and state libraries to bridge the gap from module scope to React rendering
• 23:05 - How to test image file uploads given the security constraints of the browser

Links:

• Valtio
• Removing State and Effects with Suspense!
• Reactive State and Built-In Suspense with Valtio
• Testing images with Cypress
• SVG supports JavaScript
• SleepSort

Sam and Ryan chat about how Suspense lets you remove defensive and confusing useEffect code from your React components. They also share some initial thoughts about how Remix is positioning itself in the frontend dev space.

Topics include:

• 0:00 - Intro
• 4:53 - How compatible are non-Suspense APIs with Suspense, and how can we bridge these two worlds?
• 33:35 - Impressions about Remix’s positioning around web standards

Links:

• Sam’s video for this week
• Remix
• The Cursed Computer Iceberg Meme
• Coding Machines
• Flappy Bird in Super Mario World

Sam and Ryan continue their discussions around React 18 and the in-progress work on data fetching with Suspense. They talk about the useTransition hook and how it helps eliminate inconsistent states from your application. They also talk about

Topics include:

• 0:00 - Intro
• 4:13 - What does Suspense for Data Fetching mean?
• 15:00 - How Transitions allow us do work outside of render
• 39:43 - Dealing with Timezone-dependent tests
• 46:45 - Modal routing in Next.js
• 48:15 - Snapshotting form data

Links:

• Sam’s video on SuspenseAfterInitialRender
• suspend-react by pmndrs
• Sam’s thread on suspend-react
• Built-in suspense cache discussion
• Concurrent mode transitions
• Reddit example
• React forms

Happy New Year! Sam and Ryan are back from the holidays, talking about transitive dependencies in node and the browser in the context of Ryan’s next-s3-upload library. They also discuss a SuspenseAfterInitialRender component, speed vs. testability in services and monoliths, and a thought-provoking tweet from Dan Abramov on tests vs. source code.

Topics include:

• 0:00 - Would you want tests or source code
• 11:20 - Suspense, SuspenseAfterInitialRender, unstable_avoidThisFallback
• 19:05 - Value of having a reproducible test suite for a dynamic app
• 22:12 - Speed vs. testability of services vs. monolith
• 26:24 - How to import different versions of dependencies in libraries. Module resolution in node vs. browser.

Links:

• Dan Abramov’s tweet on tests vs. source code
• A Quick Intro to Suspense in React 18
• React PR for unstable_avoidThisFallback
• How Serverless Saved Money on My Heating Bill
• next-s3-upload, Ryan’s Next.js package for uploading images