Benchmark: reselect createSelector vs plain selector vs custom createSelector

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/reselect/4.1.7/reselect.min.js"></script>

Script Preparation code:

var createSelector = (deps, select) => {
  return (state) => {
    /* gives roughly 3mln ops/sec
    const results = new Array(deps.length)
    for (let i = 0; i < deps.length; ++i) {
      results[i] = deps[i](state)
    }*/
   const results = deps.map(dep => dep(state))
    return select.apply(null, results)
  }
}

var rootSelector = (state) => state.root

var memoSelector = Reselect.createSelector(
  [rootSelector],
  (root) => root.a
);

var plainSelector = state => rootSelector(state).a

var customSelector = createSelector(
  [rootSelector],
  (root) => root.a
);

Tests:

reselect
memoSelector({ root: { a: 'test' } })
plain
plainSelector({ root: { a: 'test' } })
custom
customSelector({ root: { a: 'test' } })

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

custom

20.2M/s

plain

14.6M/s

reselect

10.2M/s

Fastest: custom (2.0x faster)

View exact numbers

✓ custom: 20,201,214 ops/sec
• plain: 14,577,349 ops/sec
• reselect: 10,238,932 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reselect
plain
custom

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/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

plain

145.4M/s

custom

51.6M/s

reselect

14.7M/s

View exact numbers

Test name	Executions per second
✓ plain	145,371,216 Ops/sec
custom	51,586,800 Ops/sec
reselect	14,745,876 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark compares three approaches to managing selectors with dependencies in a JavaScript application:

1. `reselect createSelector`
2. Plain selector (using only the root selector)
3. Custom selector (using `createSelector` from Reselect)

**What's being tested?**

Each test case measures the performance of one of these approaches by calling a specific selector function with a predefined state object.

For example, the first test case calls `memoSelector({ root: { a: 'test' } })`, which uses `reselect createSelector`. The benchmark measures how many times this selector is executed per second (ExecutionsPerSecond) and reports it as the "TestName" "reselect".

**Options compared**

The three options being compared are:

1. **`reselect createSelector`**: Uses the Reselect library's `createSelector` function to create a memoized selector with dependencies.
2. **Plain selector**: Simply calls the root selector (`rootSelector`) and then accesses its result directly.
3. **Custom selector**: Calls `createSelector` from Reselect, passing in the root selector and a dependency function.

**Pros and Cons of each approach**

1. **`reselect createSelector`**:
	* Pros: Memoization with dependencies can lead to performance improvements by caching results.
	* Cons: May introduce additional overhead due to the creation of memoized functions.
2. **Plain selector**:
	* Pros: Simple and lightweight, requires no external libraries.
	* Cons: Does not take advantage of memoization, potentially leading to more computations.
3. **Custom selector**:
	* Pros: Combines the benefits of `reselect createSelector` with the flexibility of creating custom selectors.
	* Cons: Requires knowledge of Reselect's API and may introduce additional overhead.

**Other considerations**

* The benchmark uses a test case that only tests the selector functions without any complex application logic, which might not reflect real-world scenarios.
* The Reselect library is used in two of the three options, which might influence the results.
* The benchmark does not account for other factors that can affect performance, such as memory allocation or garbage collection.

**Alternative approaches**

Other alternatives to consider when managing selectors with dependencies include:

1. **Using a different memoization library**, like `lodash`'s `memoize` function or a custom implementation using `Proxy` and `Reflect`.
2. **Optimizing plain selector functions** by applying techniques like caching, lazy loading, or parallel execution.
3. **Implementing custom selectors using `createSelector` from Reselect**, as done in the benchmark.

Keep in mind that the best approach depends on the specific requirements and constraints of your project.

reselect createSelector vs plain selector vs custom createSelector (version: 0) Benchmark.js

Which should you use to manage selectors with dependencies

Comparing performance of: `reselect vs plain vs custom`

Created: 3 years ago by: Registered User

Go to the latest result

reselect

plain

custom

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

reselect createSelector vs plain selector vs custom createSelector (version: 0) Benchmark.js

Which should you use to manage selectors with dependencies

Comparing performance of: reselect vs plain vs custom

Created: 3 years ago by: Registered User

Go to the latest result

reselect

plain

custom

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Comparing performance of: `reselect vs plain vs custom`