Wizdeo Analytics

React 19's useOptimistic: EVERYTHING you NEED to know

Published on Mon, Jun 24th 2024 Science & Technology Rectangular HD

useOptimistic makes your pokey backend feel fast with optimistic updates to your UI. It's simple to use, but we'll covert the gotcha, as well as how to use it with React Query and also whether or not you should use it with a state manager.

Code: https://github.com/jherr/useOptimistic-video

👉 Upcoming NextJS course: https://pronextjs.dev
👉 Don't forget to subscribe to this channel for more updates: https://bit.ly/2E7drfJ
👉 Discord server signup: https://discord.gg/ddMZFtTDa5
👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF

00:00 Introduction
00:50 Creating a simple API server
03:05 Setting up Pico CSS
04:40 Connecting to the API server
05:43 Posting todos to the server
06:54 Bring on useOptimistic with 19
09:04 When to call the useOptimistic setter
10:10 useOptimistic with a transition
11:10 Potential issues with useTransition
11:56 Reducer variant of useOptimistic
12:48 Error handling
14:25 Using a form action
16:00 useActionState
17:28 Integrating with React Query
18:02 Don’t fear the peer deps warning
19:48 Using React Query’s useMutation
21:32 Once more, but with Zustand
24:09 State manager or useOptimistic
24:29 Outroduction