Benchmark: immer vs clone - MeasureThat.net

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 =  {
    data: {
      data1: {
        data2: 'test'
      }
    },
    data1: {
      data1: {
        data2: 'test'
      }
    },
    data2: {
      data1: {
        data2: 'test'
      }
    },
    data3: {
      data1: {
        data2: 'test'
      }
    },
    data4: {
      data1: {
        data2: 'test'
      }
    },
    data5: {
      data1: {
        data2: 'test'
      }
    },
    data6: {
      data1: {
        data2: 'test'
      }
    },
    data7: {
      data1: {
        data2: 'test'
      }
    },
    data8: {
      data1: {
        data2: 'test'
      }
    },
    data9: {
      data1: {
        data2: 'test'
      }
    },
    data11: {
      data1: {
        data2: 'test'
      }
    },
    data12: {
      data1: {
        data2: 'test'
      }
    },
  };

Tests:

immer
const result = immer.produce(state, draft => { draft.data11.data1.data2 = 'updated' })
clone
const result = _.cloneDeep(state); result.data11.data1.data2 = 'updated';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
immer
clone

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.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmark definition and results.

**Benchmark Definition**

The benchmark tests the performance of two approaches to updating a complex data object: using Immer (a library for making changes to immutable data) versus using Lodash's `cloneDeep` method to create a deep copy of the data and then updating it.

**Test Cases**

There are two test cases:

1. **Immer**: Uses the `immer.produce` function to create a new draft of the state object, updates the `data11.data1.data2` property, and returns the updated result.
2. **Clone**: Creates a deep copy of the state object using Lodash's `cloneDeep` method, updates the `data11.data1.data2` property, and returns the updated result.

**Library Usage**

In this benchmark:

* Immer is used with its `produce` function to create a new draft of the state object.
* Lodash is used with its `cloneDeep` method to create a deep copy of the state object.

Immer's purpose is to make it easy to manage complex, immutable data structures by creating a new draft object that can be updated without affecting the original data. This approach is often referred to as "transactional updating."

Lodash's `cloneDeep` function creates a deep copy of an object or array, which allows you to update the copied data independently of the original.

**Special JS Features or Syntax**

In this benchmark:

* No special JavaScript features or syntax are used.

However, it's worth noting that Immer uses a functional programming approach to updating data, which might be unfamiliar to some developers. The `immer.produce` function takes two arguments: the state object and a callback function (in this case, an arrow function) that defines how to update the draft object.

**Pros and Cons of Different Approaches**

Here are some pros and cons of using Immer versus Lodash's `cloneDeep` method:

Immer:

* **Immutable data**: Updates are transactional, meaning they don't modify the original data.
* **Functional programming**: Immer encourages a functional programming style, which can lead to more predictable and composable code.
* **Performance**: Immer is generally faster than creating a deep copy of the entire object.

Cons:

* **Steeper learning curve**: Immer requires understanding how to use its APIs and concepts like drafts and transactions.
* **Overhead**: Creating an immer draft object might introduce some overhead, especially for small data structures.

Lodash's `cloneDeep` method:

* **Easy to understand**: Cloning an object is a simple concept that many developers are familiar with.
* **No learning curve**: Using Lodash's `cloneDeep` function doesn't require understanding new concepts or APIs.

Cons:

* **Immutability**: When using `cloneDeep`, the original data might be modified if not handled carefully.
* **Performance**: Creating a deep copy of an entire object can be slower than using Immer, especially for large datasets.

**Other Alternatives**

If you're not already using Immer or Lodash's `cloneDeep` method, other alternatives to consider are:

* Using the spread operator (`{...state}`) or the `Object.assign()` method to create a shallow copy of an object.
* Implementing your own deep copying mechanism using recursive functions or library-specific APIs (e.g., JSON.parse(JSON.stringify(obj))).

Keep in mind that these alternatives might not offer the same performance benefits as Immer or Lodash's `cloneDeep` method.

I hope this explanation helps you understand the benchmark and its implications for software engineers!

Related benchmarks:

immer vs clone (version: 0)

Comparing performance of: immer vs clone

Created: 3 years ago by: Registered User

Jump to the latest result

immer

clone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):