Skip to main content

Time Travel

Navigate through your application's state history like a time machine.

Overview​

Time Travel debugging allows you to replay state changes, jump to any point in history, and understand how your application reached its current state.

API​

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

const {
  state,           // Current state
  canUndo,         // Can go back?
  canRedo,         // Can go forward?
  undo,            // Go back one step
  redo,            // Go forward one step
  jumpTo,          // Jump to specific index
  clear,           // Clear history
} = useTimeTravel(initialState);

Basic Example​

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

function Counter() {
  const { state, undo, redo, canUndo, canRedo } = useTimeTravel({
    count: 0,
  });

  return (
    <div>
      <div>Count: {state.count}</div>
      <button onClick={() => state.count++}>Increment</button>
      <button onClick={undo} disabled={!canUndo}>Undo</button>
      <button onClick={redo} disabled={!canRedo}>Redo</button>
    </div>
  );
}

Live Playground​

Time Travel Controls

Current State
Count: 0
Text: ""
Time Travel Actions
Step 1 of 1
const { state, undo, redo, canUndo, canRedo } = 
  useTimeTravel({ count: 0, text: '' });

<button onClick={undo} disabled={!canUndo}>
  Undo
</button>
<button onClick={redo} disabled={!canRedo}>
  Redo
</button>

State History

State #1CURRENT
Count: 0
Text: ""
4:31:51 AM

Time Travel Features:

  • Undo/Redo state changes
  • Jump to any point in history
  • Complete state preservation
  • Branch management

Features​

  • Undo/Redo: Navigate state history
  • Jump to Point: Go to any state in history
  • History Replay: Watch changes replay
  • Branch Management: Handle state branches
  • Snapshot Export: Save state for later

Next Steps​