React is always improving and evolving with new ways to approach things and also new hooks, one of which that I have really liked using is the useOptimistic hook!
I struggled in the beginning with why/when I would find the best opportunities to use it, Tiktok answered that:
A couple weeks ago When I was watching a video on TikTok, I liked it and INSTANTLY saw feedback that a heart was added to the post. An ad popped up at the end of the video and I immediately scrolled away. Went BACK to the video but saw the heart was gone.
That's when it hit me:
When I initially liked the post it gave me the feedback that the heart on the video registered but swiping away so quickly with the ad blocking things, it may not have registered the like.
Now this might not be TikToks issue but this made me realize HOW I could use it!
How does the hook work?
"useOptimistic is a React Hook that lets you optimistically update the UI." - React Docs
It lets you perform an action, and OPTIMISITICALLY, it assumes everything will work. It performs the action with the UI, so the user gets an immediate response.
If you want to see the code, I put it on stackblitz so it is easy to follow.
I put all of the code in the App.tsx file.
https://stackblitz.com/edit/vitejs-vite-tt72lmea?file=src%2FApp.tsx
In this video you can see how this app is working. The first two posts that get likes show it immediately even though there is a delay! This is because of the useOptimistic hook!
Notice how the bottom two posts don't update immediately—that's because they aren't using useOptimistic, so they wait for the server before updating.
import { useOptimistic, startTransition } from "react";
Need to import it and startTransition
const [optimisticPosts, addOptimisticPost] = useOptimistic(
posts,
This part sets up an "optimistic state", which means it updates the UI immediately before waiting for the real data from the server.
// Apply the optimistic update immediately
startTransition(() => {
addOptimisticPost(postId);
});
This tells React: “Hey, update the UI immediately, but don't make this the highest priority." This prevents the UI from blocking OTHER important updates and ensures a smooth experience.
NOW, if you wanted to, You COULD potentially add some additional features that will trigger in case something fails. This way, we do not display the wrong state, like removing the "like" if the API fails.
(The gif isn't easy to see so if you want to see the video of it you can find it in this twitter thread here https://x.com/DThompsonDev/status/1884821001671749971)
Honestly, this was fun to make and experiment with!
Let me know if this helped you understand useOptimistic hooks and let me know what I should do a technical breakdown of next!
Follow me on all platforms at DThompsonDev
Top comments (0)