Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36
Chrome 108
Mac OS X 10.15.7
Desktop
2 years ago
Test name Executions per second
immer many shorts updates 1.0 Ops/sec
immer one big update 250.5 Ops/sec
immer balanced data change 23.1 Ops/sec
immutable 98.0 Ops/sec
immutable balanced data change 671.8 Ops/sec
HTML Preparation code:
AخA
 
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/immer/9.0.17/immer.umd.production.min.js"></script>
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/4.2.2/immutable.min.js"></script>
Script Preparation code:
x
 
var INITIAL_DATA = { items: {}, count: 0, keys: [] }
var produce = immer.default
var iterationTop = 30;
var iterationBottom = 70;
var iterationFull = iterationTop * iterationBottom;
Tests:
  • immer many shorts updates

     
    let data = INITIAL_DATA;
    for (i = 0; i < iterationFull; i++) {
      data = produce(data, draft => {
        draft.items[i] = { id: i, name: `NEW-ITEM${i}`, value: i }
        draft.counter++
        draft.keys.push(`NEW-ITEM${i}`)
      })
    }
  • immer one big update

     
    let data = INITIAL_DATA;
    data = produce(data, draft => {
      for (i = 0; i < iterationFull; i++) {
        draft.items[i] = { id: i, name: `NEW-ITEM${i}`, value: i }
        draft.counter++
        draft.keys.push(`NEW-ITEM${i}`)
      }
    })
  • immer balanced data change

     
    let data = INITIAL_DATA;
    for (i = 0; i < iterationTop; i++) {
      data = produce(data, draft => {
        for (x = 0; x < iterationBottom; x++) {
          const id = `${i}-${x}`
          draft.items[id] = { id: id, name: `NEW-ITEM${id}`, value: id }
          draft.count++
          draft.keys.push(`NEW-ITEM${id}`)
        }
      })
    }
  • immutable

     
    let immData = Immutable.Record({
      items: Immutable.Map({}),
      count: 0,
      keys: Immutable.List([])
    })();
    for (i = 0; i < iterationFull; i++) {
      immData = immData.update("items", (items) => {
        return items.set(
          i, 
          Immutable.Record({
            id: i, 
            name: `NEW-ITEM${i}`, 
            value: i 
          })()
        );
      });
      immData = immData.set("count", immData.get("count") + 1);
      immData = immData.update("keys", (keys) => keys.push(`NEW-ITEM${i}`));
    }
  • immutable balanced data change

     
    let immData = Immutable.Record({
      items: Immutable.Map({}),
      count: 0,
      keys: Immutable.List([])
    })();
    for (i = 0; i < iterationTop; i++) {
      immData = immData.update("items", (items) => {
        let immItems = items;
        for (x = 0; x < iterationBottom; x++) {
          const id = `${i}-${x}`;
          immItems = immItems.set(
            id, 
            Immutable.Record({
              id: id, 
              name: `NEW-ITEM${id}`, 
              value: id 
            })()
          );
          return immItems;
        }
      });
    }
    for (i = 0; i < iterationFull; i++) {
      immData = immData.set("count", immData.get("count") + 1);
      immData = immData.update("keys", (keys) => keys.push(`NEW-ITEM${i}`));
    }