Frontend First SPAs in React 19
7 snips
Jul 11, 2024 Explore the exciting new features of React 19, designed to elevate single-page applications. Discover how Suspense transforms loading states into a seamless experience. Learn about Client Actions that simplify data mutations, eliminating manual state handling. New Hooks like useOptimistic and useFormStatus enable a more intuitive UX. Experience the benefits of transitioning between old and new UIs without interruptions. Plus, see how building components like SortableList can leverage these features for dynamic user interactions.
AI Snips
Chapters
Transcript
Episode notes
Suspense Makes Loading First-Class
- Suspense decouples component loading from the component by letting it 'throw' a promise during render.
- Parents choose fallbacks so components don't always need to synchronously return a frame.
Actions Solve Mutation Coordination
- Actions let React know about mutations so the framework can manage pending state and coordination.
- This reduces custom pending flags and race conditions across concurrent submissions.
Refactor Forms To Use action
- Replace onSubmit async handlers with the new action prop on form to let React manage submission lifecycle.
- Remove event.preventDefault and manual pending toggles because async in action signals React directly.