Run results for: Deep merge

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36

Browser: Chrome 97

Operating system: Linux

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
Lodash simple merge	65957.9 Ops/sec
Lodash smart merge	97853.6 Ops/sec
seamless-immutable merge	32231.1 Ops/sec
Spread merge	3583163.5 Ops/sec

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/seamless-immutable/7.1.3/seamless-immutable.production.min.js'></script>

Script Preparation code:

var state = {
    flag: false,
    text: 'Default state',
    nested1: {
      flag: false,
      value: 1,
      text: 'Nested1',
      deep1: {
        flag: false,
        value: 1,
        text: 'Deep1',
      },
      deep2: {
        flag: false,
        value: 1,
        text: 'Deep2',
        deeper: {
          text: 'Very deep',
          value: 1
        }
      },
    },
    nested2: {
      flag: false,
      value: 2,
      text: 'Nested2',
	  deep1: {
        flag: false,
        value: 1,
        text: 'Deep1',
      },
      deep2: {
        flag: false,
        value: 1,
        text: 'Deep2',
        deeper: {
          text: 'Very deep',
          value: 1
        }
      },      
    },
  	nested3: {
      flag: false,
      value: 3,
      text: 'Nested3',
	  deep1: {
        flag: false,
        value: 1,
        text: 'Deep1',
      },
      deep2: {
        flag: false,
        value: 1,
        text: 'Deep2',
        deeper: {
          text: 'Very deep',
          value: 1,
          flag: false
        }
      },
    },
};

var patch = {
  flag: true,
  nested1: {
    flag: true
  },
  nested2: {
    deep1: {
      flag: true
    }
  },
  nested3: {
    deep2: {
      deeper: {
        flag: true
      }
    }
  }
}

function reassign(obj, src) {
    return _.isObjectLike(obj) ? _.assignWith(_.clone(obj), src, reassign) : _.cloneDeep(src);
}

var immutableState = Immutable(state);

function spreadMerge(state, patch) {
  return {
    ...state,
    flag: true,
    nested1: {
      ...state.nested1,
      flag: true
    },
    nested2: {
      ...state.nested2,
      deep1: {
        ...state.nested2.deep1,
        flag: true
      }
    },
    nested3: {
      ...state.nested3,
      deep2: {
        ...state.nested3.deep2,
        deeper: {
          ...state.nested3.deep2.deeper,
          flag: true
        }
      }
    }

  }
}

Tests:

Lodash simple merge
_.merge({}, state, patch)
Lodash smart merge
reassign(state, patch)
seamless-immutable merge
Immutable.merge(immutableState, patch, {deep: true})
Spread merge
spreadMerge(state, patch)

Run results for: Deep merge

Spread vs lodash vs seamless-immutable

Lodash simple merge

Lodash smart merge

seamless-immutable merge

Spread merge