Frontend First
React Deep Dive: useOptimistic
Episode Summary
Ryan and Sam discuss the purpose and usage of the useOptimistic() hook, a new experimental API from React.
Episode Notes
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 error states
- 29:26 - Differences between useOptimistic() and Remix fetchers
- 34:57 - How useOptimistic() lets you avoid managing a long-lived client-side cache
Links: