Waiting for server confirmations before updating the UI feels sluggish. In real-world apps, users expect near-instant feedback. Enter optimistic updates: immediately reflect changes in the UI while the server catches up. Redux Toolkit makes this surprisingly clean — no extra libraries needed.
What Are Optimistic Updates?
Instead of waiting for a network response, you assume the action will succeed and update the UI instantly. If the server later responds with an error, you roll back or show a correction.
Step 1: Structure the Slice for Pending States
Let’s model an optimistic update for a “like” feature:
// src/features/posts/postsSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';
export const likePost = createAsyncThunk(
'posts/likePost',
async (postId) => {
await axios.post(`/api/posts/${postId}/like`);
return postId;
}
);
const postsSlice = createSlice({
name: 'posts',
initialState: {
posts: [],
error: null,
},
reducers: {
optimisticLike(state, action) {
const post = state.posts.find(p => p.id === action.payload);
if (post) {
post.likes++;
}
},
revertLike(state, action) {
const post = state.posts.find(p => p.id === action.payload);
if (post) {
post.likes--;
}
},
},
extraReducers: (builder) => {
builder
.addCase(likePost.fulfilled, (state, action) => {
// No-op because UI already updated optimistically
})
.addCase(likePost.rejected, (state, action) => {
state.error = 'Failed to like post';
});
},
});
export const { optimisticLike, revertLike } = postsSlice.actions;
export default postsSlice.reducer;
Step 2: Dispatch in the Right Order
In your React component:
// src/features/posts/LikeButton.js
import { useDispatch } from 'react-redux';
import { optimisticLike, revertLike, likePost } from './postsSlice';
function LikeButton({ postId }) {
const dispatch = useDispatch();
const handleLike = () => {
dispatch(optimisticLike(postId));
dispatch(likePost(postId)).unwrap().catch(() => {
dispatch(revertLike(postId));
});
};
return (
<button onClick={handleLike}>Like</button>
);
}
How It Works
- First,
optimisticLikeimmediately increments likes in the local state. - Then,
likePostsends the actual API request. - If the request fails,
revertLikecorrects the UI by decrementing.
Pros and Cons
✅ Pros
- Instant feedback for users
- Very little code overhead with Redux Toolkit
- Decouples UI responsiveness from server performance
⚠️ Cons
- Edge cases if the server state diverges (e.g., data race conditions)
- Rollback logic can become complex for more critical operations
🚀 Alternatives
- RTK Query: Handles optimistic updates natively if you use RTKQ for data fetching
- TanStack Query: (non-Redux) has built-in support for optimistic mutations
Summary
Optimistic updates aren’t just for fancy apps — they’re fundamental for great UX. With Redux Toolkit’s built-in capabilities, you can implement this advanced pattern cleanly without needing external dependencies.
If you found this useful, you can support me here: buymeacoffee.com/hexshift
HexShift | Sciencx (2025-04-27T04:26:08+00:00) Handling Optimistic Updates in Redux Toolkit (Without Third-Party Libraries). Retrieved from https://www.scien.cx/2025/04/27/handling-optimistic-updates-in-redux-toolkit-without-third-party-libraries/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.