What does runWithSnapshotUndo do?

It captures state before/after a mutation, skips no-changes, and adds undo/redo snapshot appliers to history.

How to group multiple mutations for undo?

Call startGroup() before, endGroup() after—shares groupId, undoes all at once.

Does this work with optimistic updates in React Query?

Absolutely—before/after snaps grab pre/post states, even optimistic ones.

Function Pairs for Undo/Redo: Lighter Than Snapshots in Zustand and React Query

Snapshots sounded perfect for undo/redo—until React Query's caching made them a bloated mess. Here's the smarter fix: store undo/redo functions, not states, for a history stack that actually scales.

theAIcatchup Apr 09, 2026 4 min read

Undo/redo history stack diagram using function pairs in Zustand and React Query

⚡ Key Takeaways

Function pairs store undo/redo ops instead of full snapshots, slashing memory in Zustand + React Query stacks 𝕏
Auto-wrapping mutations with runWithSnapshotUndo generates history effortlessly, with no-op guards 𝕏
Grouping via groupId treats multi-step user actions (like drags) as atomic undos, mimicking real expectations 𝕏

Published by

theAIcatchup

Ship faster. Build smarter.

#React Query #Undo Redo #Zustand #state management

Worth sharing?

Get the best Developer Tools stories of the week in your inbox — no noise, no spam.

Originally reported by dev.to

⚡ Key Takeaways

The 60-Second TL;DR

theAIcatchup

Share this article

Worth sharing?

Related Stories

Redux's Timeless Undo Pattern: Generic Magic for React State Without the Mess

One Type to Rule Them All: Zod-Orval Pipeline Ends Fullstack Type Hell

Redux Mastery: From Prop Drilling Hell to Predictable Power

Tabs Exposed: The Next.js Frontend Juggling Multi-Business Inventory Chaos

Stay in the loop