Run results for: Immer vs manual comparison

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Browser: Chrome 138

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Manual and deepEqual

324K/s

immerJS and shallow

90K/s

View exact numbers

Test name	Executions per second
✓ Manual and deepEqual	324,434 Ops/sec
immerJS and shallow	89,767 Ops/sec

HTML Preparation code:


<script src='https://unpkg.com/fast-equals@5.2.2/dist/min/index.js'></script>
<script src='https://unpkg.com/immer@6.0.3/dist/immer.umd.production.min.js'></script>

Script Preparation code:

// Complex nested state structure (5 levels deep)
const createComplexState = () => ({
  user: {
    profile: {
      personal: {
        details: {
          info: {
            name: 'John Doe',
            age: 30,
            preferences: ['reading', 'coding', 'music']
          }
        }
      }
    }
  },
  app: {
    ui: {
      theme: 'dark',
      layout: 'grid'
    }
  },
  data: {
    items: [
      { id: 1, name: 'Item 1', meta: { category: 'A', tags: ['tag1'] } },
      { id: 2, name: 'Item 2', meta: { category: 'B', tags: ['tag2'] } }
    ]
  }
});

// Simple state structure (1-2 levels)
const createSimpleState = () => ({
  counter: 0,
  flag: true,
  items: ['a', 'b', 'c']
});

// Store original references for comparison
var originalComplexState = createComplexState();
var originalSimpleState = createSimpleState();

// States for manual mutation testing
var mutableComplexState = createComplexState();
var mutableSimpleState = createSimpleState();

Tests:

immerJS and shallow
// Reset states for fair comparison originalComplexState = createComplexState(); originalSimpleState = createSimpleState(); // Create new immutable states with Immer const newComplexState = immer.produce(originalComplexState, draft => { draft.user.profile.personal.details.info.age = 31; draft.app.ui.theme = 'light'; draft.data.items[0].name = 'Modified Item 1'; }); const newSimpleState = immer.produce(originalSimpleState, draft => { draft.counter = 1; draft.items.push('d'); }); // Shallow comparisons (reference equality) - should be fast const complexChanged = originalComplexState !== newComplexState; const simpleChanged = originalSimpleState !== newSimpleState; const unchanged = originalComplexState === originalComplexState; // Simulate what useOnyx would do - check if references changed const hasChanges = complexChanged || simpleChanged;
Manual and deepEqual
const fastEquals = window['fast-equals']; // Reset mutable states mutableComplexState = createComplexState(); mutableSimpleState = createSimpleState(); // Store original states for comparison const beforeComplexState = JSON.parse(JSON.stringify(mutableComplexState)); const beforeSimpleState = JSON.parse(JSON.stringify(mutableSimpleState)); // Mutate objects directly (like current approach might do) mutableComplexState.user.profile.personal.details.info.age = 31; mutableComplexState.app.ui.theme = 'light'; mutableComplexState.data.items[0].name = 'Modified Item 1'; mutableSimpleState.counter = 1; mutableSimpleState.items.push('d'); // Deep equality checks to detect changes - should be slower const complexChangedDeep = !fastEquals.deepEqual(beforeComplexState, mutableComplexState); const simpleChangedDeep = !fastEquals.deepEqual(beforeSimpleState, mutableSimpleState); const unchangedDeep = fastEquals.deepEqual(beforeComplexState, beforeComplexState); // Simulate what useOnyx currently does - deep equality checks const hasChangesDeep = complexChangedDeep || simpleChangedDeep;