Skip to main content

Diff Utilities

Compare state objects and identify differences between versions.

Overview​

Diff Utilities provide functions to compare state objects, highlight changes, and generate human-readable diffs.

API​

import { diff, deepDiff, formatDiff } from 'react-dev-debugger';

// Simple diff
const changes = diff(prevState, nextState);

// Deep diff for nested objects
const deepChanges = deepDiff(prevState, nextState);

// Format for display
const formatted = formatDiff(changes);

Basic Example​

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

const prev = { count: 5, user: { name: 'John' } };
const next = { count: 6, user: { name: 'John' } };

const changes = diff(prev, next);
// { count: { from: 5, to: 6 } }

Live Playground​

State Comparison

Previous State
{
  "count": 5,
  "name": "John",
  "active": true
}
Next State
{
  "count": 6,
  "name": "Jane",
  "active": true
}

Diff Results

Modified (2)CHANGED
count
From:5
To:6
name
From:"John"
To:"Jane"

Diff Features:

  • Detect added properties
  • Detect removed properties
  • Detect modified values
  • Show unchanged (optional)

Features​

  • Shallow Diff: Compare top-level properties
  • Deep Diff: Compare nested objects
  • Array Diff: Track array changes
  • Format Options: JSON, text, or visual
  • Change Types: Added, removed, modified

Advanced Examples​

Deep Object Comparison​

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

const prev = {
  user: {
    profile: {
      name: 'John',
      age: 30,
    },
  },
};

const next = {
  user: {
    profile: {
      name: 'John',
      age: 31,
    },
  },
};

const changes = deepDiff(prev, next);
// { 'user.profile.age': { from: 30, to: 31 } }

Array Comparison​

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

const prev = [1, 2, 3];
const next = [1, 2, 3, 4];

const changes = diff(prev, next);
// Shows item added at index 3

Next Steps​