React Deep Dive: useOptimistic

Frontend First

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:

  • Ryan’s useOptimistic tweet
  • Ryan’s video on React Cache: Part 2

To listen to explicit episodes, sign in.

Stay up to date with this show

Sign in or sign up to follow shows, save episodes and get the latest updates.

Select a country or region

Africa, Middle East, and India

Asia Pacific

Europe

Latin America and the Caribbean

The United States and Canada