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/118.0.5993.2477 YaBrowser/23.11.0.2477 Yowser/2.5 Safari/537.36

Browser: Yandex Browser 23

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

custom

20.8M/s

plain

14.1M/s

reselect

10.3M/s

View exact numbers

Test name	Executions per second
✓ custom	20,836,944 Ops/sec
plain	14,070,303 Ops/sec
reselect	10,298,377 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