Benchmark: Lodash CloneDeep vs Immer Produce realworld

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/immer@3.1.3/dist/immer.umd.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

state = {
  cities: [{ date: '', color: '', city: '', rating: true, season: 'spring', pic: '', age: 0 }],
  bcInitHidden: false,
  customCompCss: '',
  dataLoopConfig: { dataSource: 'dataSourcekmyb762u' },
  id: 980,
  dataLink: {
    'basic.customCompCss': {
      dataSourcekmyb762u__index: 0,
      dataSource: 'dataSourcekmyb762u->dataSourcekmyb762u__index->bgColor',
    },
  },
  dataSourceProps: {},
  inheritProps: [],
  service: {
    jsonConfigUrl: '',
    onlineStatus: 1,
    shareImage:
      'https://sta-op.douyucdn.cn/butterfly-java/2021/04/06/09ce2f30b5c986f3d3f8b0e22e40a313.png?width=357&height=345&size=304128',
    minPlatformVersion: 0,
    autoScrollToPlayer: false,
    type: 'newh5',
    templatePageId: 0,
    roomStatus: false,
    score: 95,
    activityAlias: '20210406MLSQI',
    OANumber: 3008017,
    showType: 0,
    unitCompsInfo: [],
    beginTime: '2021-03-31 19:50:47',
    notTransPx: true,
    disableAutoFillBgGlobal: false,
    liveRoomIds: '888888',
    tdkStatus: true,
    OAValid: true,
    pendantPriority: '',
    pageId: 18272,
    disableWebP: false,
    showRooms: '',
    disablePageLazyLoad: false,
    sourceType: '3',
    seoStatus: false,
    headerPlayerStatus: '0',
    name: 'rydfbH5',
    projectId: 3837,
    supervisor: 'reed@douyu.tv',
    disableRelatedUrl: false,
    socketMessageType: '',
    title: '斗鱼王者荣耀主播巅峰榜',
    pageType: 0,
    shareContent: '斗鱼最强的技术大神集结地，各路国服主播教你上分套路，每日上演强强对决！',
    customComponents: [],
    relatedUrl: '',
    channelId: '',
    urlRiOn: false,
    roomIds: '888888',
    shareCustomUrl: '',
    orientation: 'portrait',
    subPosition: '',
    shareWithRoomInfo: false,
    socketMsgInit: '',
    refresh: 2,
    minWidth: 1400,
    socketMsgCache: '',
    authorId: 1463,
    trunkRoomIds: '888888',
    dotId: '',
    shareTitle: '斗鱼王者主播正在冲击巅峰榜一',
    width: 750,
    auditStatus: 3,
    endTime: '2022-12-31 19:50:47',
    activityType: 0,
    maxPlatformVersion: 0,
  },
};

Tests:

Produce
const result = immer.produce(state, draft => { draft.service.onlineStatus = 0 })
CloneDeep
const result = _.cloneDeep(state); result.service.onlineStatus = 0;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Produce
CloneDeep

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares two approaches to create a shallow copy of an object: `Lodash`'s `cloneDeep` function and `Immer`'s `produce` function. The test case uses a real-world JSON object as input, which represents a game state.

**Options Compared**

Two options are compared:

1. **Lodash CloneDeep**: Uses the `cloneDeep` function from Lodash to create a deep copy of the input object.
2. **Immer Produce**: Uses the `produce` function from Immer to create a shallow copy of the input object, allowing for efficient updates without creating a new object.

**Pros and Cons**

* **Lodash CloneDeep**:
	+ Pros: Creates an exact deep copy of the original object, which can be useful in certain scenarios.
	+ Cons: Can result in slower performance due to the overhead of creating a deep copy.
* **Immer Produce**:
	+ Pros: Allows for efficient updates to the copied object without creating a new one, making it suitable for scenarios where modifications are common.
	+ Cons: Creates a shallow copy, which can lead to issues if the original object contains nested objects with mutable properties.

**Library and Purpose**

* **Lodash**: A popular JavaScript utility library that provides various functions for tasks like array manipulation, string manipulation, and more. In this case, `cloneDeep` is used to create a deep copy of an object.
* **Immer**: A lightweight state management library that helps manage complex data structures by providing efficient updates to shallow copies.

**Special JS Features/Syntax**

None mentioned in the provided benchmark definition.

**Other Alternatives**

If you need to compare deep copying approaches, other alternatives could be:

* Using `JSON.parse(JSON.stringify(obj))` (not recommended due to potential issues with circular references)
* Implementing a custom deep copy function using recursion or iteration
* Using libraries like `deepcopy` from `lodash-es`

Keep in mind that the choice of approach depends on the specific use case and performance requirements.

In this benchmark, the results show that Immer's `produce` function outperforms Lodash's `cloneDeep` function, making it a suitable choice for scenarios where efficient updates are necessary.

Related benchmarks:

Lodash CloneDeep vs Immer Produce realworld (version: 0)

Comparing performance of: Produce vs CloneDeep

Created: 4 years ago by: Guest

Jump to the latest result

Produce

CloneDeep

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):