Skip to main content

Snapshot Store

Capture, store, and restore application state snapshots.

Overview​

The Snapshot Store allows you to save complete application state at any point, compare snapshots, and restore state for debugging.

API​

import { SnapshotStore } from 'react-dev-debugger';

const store = new SnapshotStore();

// Take snapshot
const id = store.capture(state, 'Before bug');

// List snapshots
const snapshots = store.list();

// Restore snapshot
const restored = store.restore(id);

// Compare snapshots
const diff = store.compare(id1, id2);

// Export/Import
const json = store.export();
store.import(json);

Basic Example​

import { SnapshotStore } from 'react-dev-debugger';

const store = new SnapshotStore();

function App() {
  const [state, setState] = useState(initialState);

  const takeSnapshot = () => {
    store.capture(state, `Snapshot ${Date.now()}`);
  };

  const restoreSnapshot = (id) => {
    const snapshot = store.restore(id);
    setState(snapshot.state);
  };

  return (
    <div>
      <button onClick={takeSnapshot}>Take Snapshot</button>
      {/* ... */}
    </div>
  );
}

Live Playground​

Current Application State

State Controls
0
Snapshot Management
const store = new SnapshotStore();

// Capture current state
const id = store.capture(state, 'Before bug');

// Restore snapshot
const restored = store.restore(id);
setState(restored.state);

Saved Snapshots (0)

No snapshots yet. Change the state and capture a snapshot.

Snapshot Features:

  • Capture state at any time
  • Name snapshots for easy identification
  • Restore previous states
  • Export/import snapshots
  • Compare snapshots

Features​

  • State Capture: Save complete state
  • Named Snapshots: Label important states
  • Snapshot Comparison: See differences
  • Export/Import: Share snapshots
  • Persistence: Save to localStorage

Next Steps​