All 5 State Management in Next.js Apps questions
More in State Management in Next.js Apps
What is local component state, and when is it enough for managing data in a Next.js application? How do you share state between multiple components that are not directly related, such as a shopping cart shown in both the header and a product page? When would you reach for a dedicated state management library, like Zustand or Redux, instead of just using React Context? How does the concept of state management differ in Next.js compared to a purely client side React application, given the presence of server components?
Advertisement
Back to results for “Validation”
Next.js › State Management in Next.js Apps

How would you implement optimistic state updates for a feature like a like button, so the interface feels instant while a server action processes the actual update?

Advanced

Answer

You use the useOptimistic hook to immediately show the expected new state, such as an increased like count, right when the user clicks, while the actual server action runs in the background, and React automatically reconciles the optimistic value with the real result once the server action completes or fails.
'use client';
import { useOptimistic } from 'react';

function LikeButton({ likes, onLike }) {
  const [optimisticLikes, addOptimisticLike] = useOptimistic(likes, (state) => state + 1);
  return (
    <button onClick={() => { addOptimisticLike(); onLike(); }}>
      {optimisticLikes} likes
    </button>
  );
}
Real-world example A social media app shows a like count increasing immediately when a user taps the like button, well before the server action finishes saving that like to the database, making the interaction feel instant and responsive.

Common follow-ups: What happens to the optimistic state if the server action ultimately fails?;How does useOptimistic compare to manually managing a temporary loading state?

Server Actions & Mutations;Form Handling & Validation in Next.js
All 5 State Management in Next.js Apps questions