SPAs in React 19

Sam and Ryan discuss the new features in React 19 that will specifically benefit developers building single-page applications. They talk about how Suspense and Transitions let developers "teach" React about when their apps are in a loading or a pending state, how Client Actions improve upon using events in React 18 to handle data mutations, and how Actions enable React Components to automatically render and discard optimistic updates without any knowledge of the application's data layer. They also discuss several new Hooks like useOptimistic, useFormStatus, useActionState, and useOptimistic. Timestamps: 0:00 - Intro 2:19 - How SPAs are built in React 18 5:29 - How Suspense made loading a first-class concept in React 7:48 - The problem with data writes in React 18 10:37 - What are Client Actions? 12:05 - What does it look like to use Actions? 14:13 - What are the benefits of Actions? 18:46 - How does React 19 change the Optimistic UI story? 29:40 - Working with Transitions outside of Actions 36:06 - The useActionState Hook 37:51 - Using Transitions to keep the old UI rendered and responsive 41:25 - How Transitions enable better composition patterns in third-party libraries 43:55 - Building a SortableList that flips between being controlled and uncontrolled Links: React Unpacked: A Roadmap to React 19

You can listen to SPAs in React 19 online on Radio and Podcast. Open the player on this page to stream the available audio.

SPAs in React 19 is an episode from Frontend First by Frontend First.

This episode is 00:59:34 long.

This episode was published on Jul 11, 2024.

Yes. Use the heart button on the episode page to add it to your favorite episodes list.

Yes. This page shows related episodes from Frontend First when more episodes are available from the podcast feed.