Optimistic UI Updates

1. Apply locally — mutate the cache/UI to the expected state immediately, before the request 2. Send the request — fire the POST/PUT in the background 3. On success — reconcile: server may return the canonical state (e.g. new like count), replace local 4. On error — rollback to the previous state, show a toast ("Couldn't like — retry") 5. Conflict — if the server says the state already changed, refetch and show the truth 6. Library — React Query's onMutate + onError rollback, SWR's optimisticData, or hand-rolled 7. Idempotency — make the action idempotent (like-toggle, not like-increment) so retries are safe

// React Query — optimistic like toggle useMutation({ mutationFn: (liked: boolean) => api.put(`/posts/${id}/like`, { liked }), onMutate: async (liked) => { await queryClient.cancelQueries({ queryKey: ["post", id] }); const prev = queryClient.getQueryData(["post", id]); queryClient.setQueryData(["post", id], (p) => ({ ...p, liked })); // optimistic return { prev }; // context for rollback }, onError: (_e, _v, ctx) => { queryClient.setQueryData(["post", id], ctx?.prev); // rollback toast.error("Couldn't update — reverted"); }, onSettled: () => queryClient.invalidateQueries({ queryKey: ["post", id] }), }); // Hand-rolled — same pattern const [liked, setLiked] = useState(post.liked); const toggle = async () => { const prev = liked; setLiked(!prev); // optimistic try { await api.put(`/posts/${id}/like`, { liked: !prev }); } catch { setLiked(prev); toast.error("Reverted"); } // rollback };