Make a save action optimistic with TanStack Query

Clicking save waits for the server, and only a beat later does the screen finally catch up.

Intermediate to advancedRead 7 minDoing: an afternoon7 steps

What you'll have at the end

A save button whose screen updates the instant it fires, then reconciles to the server's real answer whether the save succeeds, fails, or gets fired twice.

Before you start

You need

A save action already wired to TanStack Query's useMutation, sending an edit to the server and refreshing the screen afterward by invalidating the query it edits once the request succeeds.

Not covered

Creating a brand-new task whose real id only exists after the server assigns one, which needs a temporary placeholder id instead of the snapshot-and-rollback shown here.

Leans on

7 steps

Where to go next

Replace a manual fetch effect with TanStack Query

for the useQuery-based read this recipe's save writes back into, if the screen isn't already reading through useQuery

Page through a long feed instead of loading it all at once

for updating one item inside a paginated list, since a list split across pages needs a different cache-write shape than the single flat list here

Checked 22 Aug 2026

Part of the Frontend State Management Beyond Redux cookbook