Run results for: reselect createSelector vs plain selector vs custom createSelector

Run details:

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: Chrome 134

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

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

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' } })

Run results for: reselect createSelector vs plain selector vs custom createSelector

Which should you use to manage selectors with dependencies

reselect

plain

custom