Benchmark: Lodash, Underscore, react-fast-compare isEqual test

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
<script type="text/javascript">
  window.lodash = _;
  _ = null;
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js'></script>
<script type="text/javascript">
  window.underscore = _;
  _ = null;
</script>
<script src="https://cdn.jsdelivr.net/npm/react-fast-compare@latest/index.js"></script>

Script Preparation code:

// 3 levels deep
window.foo3 = { a: 1, b: 2, c: { a: 1, b: 2, c: { a: 1, b: 2 } } };
window.bar3 = { a: 1, b: 2, c: { a: 1, b: 2, c: { a: 1, b: 4 } } };

// 4 levels deep
window.foo4 = { a: 1, b: 2, c: { a: 1, b: 2, c: { a: 1, b: 2, c: { a: 1, b: 2 } } } };
window.bar4 = { a: 1, b: 2, c: { a: 1, b: 2, c: { a: 1, b: 2, c: { a: 1, b: 4 } } } };

// 5 levels deep
window.foo5 = { a: 1, b: 2, c: { a: 1, b: 2, c: { a: 1, b: 2, c: { a: 1, b: 2, c: { a: 1, b: 2 } } } } };
window.bar5 = { a: 1, b: 2, c: { a: 1, b: 2, c: { a: 1, b: 2, c: { a: 1, b: 2, c: { a: 1, b: 4 } } } } };

Tests:

lodash Level 5
lodash.isEqual(window.foo5, window.bar5)
underscore Level 5
underscore.isEqual(window.foo5, window.foo5)
JSON.stringify Level 5
JSON.stringify(window.foo5) === JSON.stringify(window.bar5);
react-fast-compare Level 5
equal(window.foo5, window.foo5)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash Level 5
underscore Level 5
JSON.stringify Level 5
react-fast-compare Level 5

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 11 months ago)

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

Browser/OS: Chrome 137 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
lodash Level 5	846955.1 Ops/sec
underscore Level 5	118403632.0 Ops/sec
JSON.stringify Level 5	2862459.0 Ops/sec
react-fast-compare Level 5	147962096.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Description**

The benchmark is designed to compare the performance of different libraries and approaches for equality checks in JavaScript. The tests are based on a specific use case where two objects (`foo5` and `bar5`) are compared using various methods:

1. Lodash's `isEqual`
2. Underscore's `isEqual`
3. React Fast Compare's `equal`
4. Direct comparison using `===`

The benchmark also includes a control test that converts the objects to JSON strings for comparison.

**Library and Approaches Comparison**

Here's a brief overview of each library and approach:

1. **Lodash ( isEqual )**: Lodash is a popular JavaScript utility library. The `isEqual` function checks if two objects are equal by recursively comparing their properties.
2. **Underscore ( isEqual )**: Underscore is another well-known utility library. Its `isEqual` function works similarly to Lodash's, but with some differences in implementation.
3. **React Fast Compare ( equal )**: React Fast Compare is a specialized library for fast equality checks. Its `equal` function uses a combination of techniques, including hashing and caching, to quickly determine if two objects are equal.
4. **Direct Comparison ( === )**: This approach simply compares the two objects using the `===` operator.

**Pros and Cons**

Here's a brief summary of each approach:

1. **Lodash ( isEqual )**: Pros: easy to use, well-documented, and widely adopted. Cons: can be slower than other approaches due to its recursive nature.
2. **Underscore ( isEqual )**: Pros: similar performance characteristics to Lodash. Cons: less widely used than Lodash.
3. **React Fast Compare ( equal )**: Pros: extremely fast performance, suitable for high-traffic applications. Cons: requires a specialized library and can be overwhelming to set up.
4. **Direct Comparison ( === )**: Pros: simple and straightforward, no additional dependencies required. Cons: may not work correctly in all edge cases or with complex data structures.

**Additional Considerations**

When choosing an equality check approach, consider the following factors:

* Performance: If speed is critical, React Fast Compare might be a good choice.
* Complexity: For simpler objects, direct comparison using `===` might suffice. More complex objects may require Lodash or Underscore.
* Readability: If readability is crucial, Lodash's `isEqual` function provides a clear and concise API.

**Other Alternatives**

If you're looking for alternative libraries or approaches, consider:

1. **JSON.stringify**: This approach converts the objects to JSON strings for comparison, which can be faster than recursive equality checks.
2. **Mocha**: A popular testing framework that includes built-in support for equality checks.
3. **Jest**: Another popular testing framework with support for equality checks.

These alternatives might not offer the same level of performance as React Fast Compare, but they can provide a more straightforward and maintainable solution for many use cases.

Related benchmarks:

Lodash, Underscore, react-fast-compare isEqual test (version: 0)

Test on isEqual performance

Comparing performance of: lodash Level 5 vs underscore Level 5 vs JSON.stringify Level 5 vs react-fast-compare Level 5

Created: 3 years ago by: Guest

Jump to the latest result

lodash Level 5

underscore Level 5

JSON.stringify Level 5

react-fast-compare Level 5

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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