Benchmark: Lodash merge vs Immer Produce on moderate size object

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/immer/dist/immer.umd.js"></script>
<script src='https://cdn.jsdelivr.net/npm/lodash/lodash.js'></script>

Script Preparation code:

const LEN = 1000;
const arr = new Array(LEN).fill(Math.random());
var state =  {
    data: {
      data1: {
        data2: 'test'
      },
      data2: arr
    }
  };

Tests:

Produce
const result = immer.produce(state, draft => { draft.data.data1.data2 = 'updated' })
merge
const result = _.merge({},state, {data: {data1: {data2: 'updated'}}});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Produce
merge

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Produce	522791.9 Ops/sec
merge	12510.7 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark compares two methods for updating a deeply nested object in JavaScript: **Immer's `produce` function** and **Lodash's `merge` function**. Both libraries are commonly used in JavaScript applications, especially those involving state management or complex data manipulation.

### Options Being Compared

1. **Immer's `produce`:**
   - **Implementation**: 
     ```javascript
     const result = immer.produce(state, draft => { draft.data.data1.data2 = 'updated' });
     ```
   - **Description**: This approach allows developers to work with a "draft" state that can be mutated directly. Immer will handle the complexities of immutability for you by comparing the draft to the original state and efficiently producing a new state.

2. **Lodash's `merge`:**
   - **Implementation**:
     ```javascript
     const result = _.merge({}, state, {data: {data1: {data2: 'updated'}}});
     ```
   - **Description**: This method merges the source object into the destination object. In this case, it merges a new object that updates the `data2` property with the appropriate updated value, maintaining immutability through a new object.

### Pros and Cons

- **Immer `produce`:**
  - **Pros**:
    - **Simplicity**: Allows for straightforward syntax that feels like mutating but takes care of immutability under the hood.
    - **Performance**: Efficiently creates immutable updates only when changes are made, reducing unnecessary copying of data.
    - **Readability**: Easy to understand and maintain, particularly for complex nested structures.

- **Cons**: 
    - **Size**: Introduces an additional library dependency.
    - **Overhead**: Some overhead due to the internal mechanisms to track changes and create new states.

- **Lodash `merge`:**
  - **Pros**:
    - **Flexibility**: Very flexible for merging multiple objects; the syntax allows for extensive modifications across different structures.
    - **No Special Syntax**: Familiarity due to long-standing usage in the JavaScript ecosystem.

- **Cons**:
    - **Immutability Handling**: Does not enforce immutability. Developers need to ensure that the source and destination objects are handled correctly to avoid unintended side effects.
    - **Performance**: Can lead to performance issues with deeply nested structures, as it creates a merged result with unnecessary deep cloning.

### Other Considerations

- **Use Cases**: If your application needs to frequently update deeply nested structures, Immer is likely a better choice due to its simplicity and performance benefits. Lodash is more suitable for scenarios where you need a more generalized merging capability and don’t mind dealing with mutable data structures.

### Alternatives

Aside from Immer and Lodash, other alternatives for managing immutable state or object updates in JavaScript include:

- **Immutable.js**: A library designed specifically for building immutable data structures, which can provide significant performance benefits in state management.
- **Deepmerge**: A utility for deep merging of objects that is lightweight and focused explicitly on that purpose.
- **Reduxtoolkit**: If using Redux, the toolkit offers built-in "createSlice" functionality that simplifies state manipulation while providing Immer under the hood, leveraging its benefits without explicitly using Immer from the outside.

Developers should consider the specific needs of their application and the ecosystem they are working within when choosing between these libraries and methods.

Related benchmarks:

Lodash merge vs Immer Produce on moderate size object (version: 1)

Lodash CloneDeep vs Immer Produce on moderate size object with 1000 elements in an array

Comparing performance of: Produce vs merge

Created: one year ago by: Guest

Jump to the latest result

Produce

merge

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):