Skip to main content

State Tracker

Centralized state tracking system for monitoring all state changes in your React application.

Overview​

The State Tracker provides a unified interface to track, monitor, and debug state changes across your entire React application. It works with hooks, context, and external state management libraries.

API​

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

// Initialize tracker
const tracker = new StateTracker(options);

// Track state changes
tracker.track(componentName, stateName, value);

// Subscribe to changes
const unsubscribe = tracker.subscribe((change) => {
  console.log('State changed:', change);
});

// Get current state
const currentState = tracker.getState();

// Get history
const history = tracker.getHistory();

// Clear history
tracker.clear();

Configuration Options​

interface StateTrackerOptions {
  maxHistorySize?: number;        // Max history entries (default: 100)
  enableTimeline?: boolean;        // Enable timeline tracking
  enableDiff?: boolean;            // Calculate diffs automatically
  logChanges?: boolean;            // Log changes to console
  filter?: (change) => boolean;    // Filter tracked changes
}

Basic Example​

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

const tracker = new StateTracker({
  maxHistorySize: 50,
  enableTimeline: true,
  logChanges: true,
});

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Track state change
    tracker.track('App', 'count', count);
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}
      </button>
    </div>
  );
}

Live Playground​

Tracked Components

Counter A
Count: 0
Counter B
Count: 0
Todo List Tracking
Total todos: 0
Tracker Configuration
const tracker = new StateTracker({
  maxHistorySize: 20,
  enableTimeline: true,
  logChanges: true,
});

// Track state changes
tracker.track('Counter', 'count', prevCount, nextCount);

// Subscribe to changes
tracker.subscribe((change) => {
  console.log('State changed:', change);
});

State History

No state changes tracked yet. Start interacting with the components above.

Features:

  • Track state across multiple components
  • View complete state history
  • Filter by component
  • See previous and next values
  • Timestamp for each change

Advanced Examples​

Multi-Component Tracking​

const tracker = new StateTracker({
  maxHistorySize: 100,
  enableTimeline: true,
});

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [filter, setFilter] = useState('all');

  useEffect(() => {
    tracker.track('TodoApp', 'todos', todos);
  }, [todos]);

  useEffect(() => {
    tracker.track('TodoApp', 'filter', filter);
  }, [filter]);

  return <div>{/* ... */}</div>;
}

Subscribe to Changes​

const tracker = new StateTracker();

// Subscribe to all changes
const unsubscribe = tracker.subscribe((change) => {
  console.log(`${change.component}.${change.stateName} changed`);
  console.log('Previous:', change.prevValue);
  console.log('Next:', change.nextValue);
});

// Unsubscribe when done
unsubscribe();

Best Practices​

✅ Do's​

  • Initialize once: Create a single tracker instance
  • Use meaningful names: Clear component and state names
  • Set reasonable limits: Don't store too much history
  • Filter unnecessary changes: Focus on relevant state

❌ Don'ts​

  • Don't track every render: Only track meaningful state
  • Don't forget to unsubscribe: Clean up subscriptions
  • Don't track sensitive data: Be careful with passwords, tokens

TypeScript Support​

interface MyState {
  count: number;
  user: User | null;
}

const tracker = new StateTracker();

// Type-safe tracking
tracker.track<MyState>('MyComponent', 'count', 42);

Next Steps​