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 - Intro1:12 - The tradeoff between data that’s fast but stale, vs. data that’s slow but consistent11:55 - Strict mode in React 18, the proposed Offscreen API, and the implications for internal vs. external state in Concurrent ReactLinks:XataNew 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 - Intro2:33 - Sam’s Remix app6:34 - The Indie stack19:36 - Creating the data model in Prisma, a form, and an index route25:48 - Ryan building the same Blog app in Remix and Next.js32:33 - Using onSubmit vs. posting an HTML Form39:15 - Remix’s fetcher API46:46 - Borrowing declarative abstractions56: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:RemixSam’s YouTube video on RemixKent C Dodds on JS PartyFly.ioHasura 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 - Intro2: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 server36:36 - Does running code on the edge really matter for day-to-day developers?Links:Ryan Florence’s tweet on speakers vs. musicSam’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 - Intro8:07 - Auth-based route guards and synchronized spinners in Next.js26:34 - Tradeoffs of loading once on render vs. fully reactive pages42:30 - Ryan’s video on Deploy notifications47:45 - Errors + stale auth + SentryLinks:Fixing Twitter's loading screen using Synchronized Animations in ReactSWRSentry

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 - Intro5:19 - Using startTransition with a router9:36 - How React 18 yields21:37 - Why both Suspense for Data Fetching and Server Components need a way to invalidate React’s cache37:24 - How Server Components can remove the need for explicit API calls without sacrificing any of React’s composability1:01:00 - Real-world problems concurrent features address1:03:20 - Moving state from React to the URLLinks:Sam’s video: How to remove loading spinners in Next.jsRyan’s video: Transitions that SuspendReact Server ComponentsReact Working Group - React 18React 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 - Intro2:35 - How to trigger Suspense by accessing an unresolved promise11:04 - Tension between flexibility of Transitions and Suspense vs. best practices around data fetching21:00 - Semantics of React APIs when using Concurrent features24:12 - How internal tools differ from public websites43:24 - Sam’s next vid: Reducing loading spinners on route transitions in Next.js45:28 - Ryan’s next vid: Demo of startTransitionLinks: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 - Intro1:50 - Using Promises and state libraries to bridge the gap from module scope to React rendering23:05 - How to test image file uploads given the security constraints of the browserLinks:ValtioRemoving State and Effects with Suspense!Reactive State and Built-In Suspense with ValtioTesting images with CypressSVG supports JavaScriptSleepSort

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 - Intro4: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 standardsLinks:Sam’s video for this weekRemixThe Cursed Computer Iceberg MemeCoding MachinesFlappy 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 aboutTopics include:0:00 - Intro4:13 - What does Suspense for Data Fetching mean?15:00 - How Transitions allow us do work outside of render39:43 - Dealing with Timezone-dependent tests46:45 - Modal routing in Next.js48:15 - Snapshotting form dataLinks:Sam’s video on SuspenseAfterInitialRendersuspend-react by pmndrsSam’s thread on suspend-reactBuilt-in suspense cache discussionConcurrent mode transitionsReddit exampleReact 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 code11:20 - Suspense, SuspenseAfterInitialRender, unstable_avoidThisFallback19:05 - Value of having a reproducible test suite for a dynamic app22:12 - Speed vs. testability of services vs. monolith26: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 codeA Quick Intro to Suspense in React 18React PR for unstable_avoidThisFallbackHow Serverless Saved Money on My Heating Billnext-s3-upload, Ryan’s Next.js package for uploading images