Building Real-Time Multi-User Apps With JSON Patches

A JSON patch describes a change to an object with an operation, path, and value. Sahu shows adding properties to an empty object, then applying a patch through a Redux reducer using Immer’s `applyPatches`. Patches can update application state without writing a separate reducer for each change.

Storing patches preserves the sequence of changes, which can support version history and reconstructing earlier states. It can take more storage and computation to rebuild a state, and a snapshot alone cannot reveal the patches that produced it. Because patches are serializable, they can also sync document changes between threads or over a network.

Sahu introduces Sync State, an experimental React state library built on Redux and Immer. Its `useDoc` hook and `setDoc` callback let components read and update a shared document while Immer generates patches behind the scenes. Sync State uses path-based listeners so updates reach components using the changed data, instead of running selectors for every connected component.

The history plugin stores patches for undo and redo rather than full state snapshots. For multiplayer, the remote plugin buffers local patches until the server accepts them, reverses rejected changes, and handles ordering. Sahu’s examples show unrelated edits, such as changing color and size, both succeeding; when clients change the same property, the server’s last accepted value becomes the source of truth. Undo and redo stacks remain local to each client.

Sahu describes Sync State as an early, evolving release and invites community feedback. The team was exploring REST and GraphQL plugins to sync local document mutations with backend data, along with plugins for forms, API calls, and persistent storage. He credits Himanshu, Rohit, Suraj, and Ankur for work on the release and documentation.