MENU

Fun & Interesting

React 19's useOptimistic: EVERYTHING you NEED to know

Jack Herrington 18,720 9 months ago
Video Not Working? Fix It Now

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

Comment