Benchmark with react-redux-benchmarks

[dai-shi]

Continuing from: #1 (comment)

Note:

The first Version column is meaningless. react-redux 5.0.7 is only used in the tree-view benchmark and not in other tree-view-* benchmarks.

[dai-shi]

Re-run all benchmarks with React 16.8.2 and react-hooks-easy-redux v1.0.0.

$ git clone https://github.com/dai-shi/react-redux-benchmarks.git
$ cd react-redux-benchmarks
$ npm install
$ npm run initialize
$ REDUX=5.0.7 BENCHMARK_TRACE=false BENCHMARKS=tree-view:tree-view-rher:tree-view-rher-simple:tree-view-memo:tree-view-dumb npm start

Running benchmark tree-view
  react-redux version: 5.0.7
    Checking max FPS... (30 seconds)

Results for benchmark tree-view:
┌─────────┬─────────┬──────────────────────────────────────────────────────────────────────────────┐
│ Version │ Avg FPS │ FPS Values                                                                   │
├─────────┼─────────┼──────────────────────────────────────────────────────────────────────────────┤
│ 5.0.7   │ 52.08   │ 1,56,48,53,55,43,45,53,50,56,53,55,46,52,53,50,53,55,56,49,53,54,56,52,51,55 │
└─────────┴─────────┴──────────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-rher
  react-redux version: 5.0.7
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-rher:
┌─────────┬─────────┬───────────────────────────────────────────────────────────────────────────────────────┐
│ Version │ Avg FPS │ FPS Values                                                                            │
├─────────┼─────────┼───────────────────────────────────────────────────────────────────────────────────────┤
│ 5.0.7   │ 38.86   │ 1,36,48,27,43,45,42,33,37,29,28,43,37,44,41,47,33,44,41,29,40,46,32,45,34,43,35,48,38 │
└─────────┴─────────┴───────────────────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-rher-simple
  react-redux version: 5.0.7
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-rher-simple:
┌─────────┬─────────┬────────────────────────────────────────────────────────────────────────────────────┐
│ Version │ Avg FPS │ FPS Values                                                                         │
├─────────┼─────────┼────────────────────────────────────────────────────────────────────────────────────┤
│ 5.0.7   │ 51.22   │ 1,57,47,53,55,43,39,51,50,53,52,57,44,56,49,46,49,56,53,58,49,56,51,52,56,52,49,50 │
└─────────┴─────────┴────────────────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-memo
  react-redux version: 5.0.7
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-memo:
┌─────────┬─────────┬──────────────────────────────────────────────────────────────────────────────────────────┐
│ Version │ Avg FPS │ FPS Values                                                                               │
├─────────┼─────────┼──────────────────────────────────────────────────────────────────────────────────────────┤
│ 5.0.7   │ 47.66   │ 1,44,52,43,52,50,43,44,42,49,39,52,50,47,48,50,40,56,41,51,44,41,54,44,52,55,51,52,55,41 │
└─────────┴─────────┴──────────────────────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-dumb
  react-redux version: 5.0.7
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-dumb:
┌─────────┬─────────┬─────────────────────────────────────────────────────────────────────────────────┐
│ Version │ Avg FPS │ FPS Values                                                                      │
├─────────┼─────────┼─────────────────────────────────────────────────────────────────────────────────┤
│ 5.0.7   │ 29.27   │ 1,23,29,30,25,29,34,31,34,29,22,27,24,23,31,25,26,33,34,32,35,27,38,34,19,29,38 │
└─────────┴─────────┴─────────────────────────────────────────────────────────────────────────────────┘

-rher: useReduxState in react-hooks-easy-redux
-rher-simple: useReduxStateSimple in react-hooks-easy-redux

[dai-shi]

Updated react-hooks-easy-redux v1.1.1.
Also added redux-react-hook (-rrh) as a benchmark.

$ git clone https://github.com/dai-shi/react-redux-benchmarks.git
$ cd react-redux-benchmarks
$ npm install
$ npm run initialize
$ REDUX=5.0.7 BENCHMARK_TRACE=false BENCHMARKS=tree-view:tree-view-rher:tree-view-rher-simple:tree-view-rrh:tree-view-memo:tree-view-dumb npm start

Running benchmark tree-view
  react-redux version: 5.0.7
    Checking max FPS... (30 seconds)

Results for benchmark tree-view:
┌─────────┬────────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ FPS Values                                                                         │
├─────────┼────────────────────────────────────────────────────────────────────────────────────┤
│ 51.89   │ 1,55,53,52,55,45,49,48,47,54,53,52,46,54,55,54,49,51,52,53,56,55,50,53,52,55,54,49 │
└─────────┴────────────────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-rher
  react-redux version: 5.0.7
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-rher:
┌─────────┬───────────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ FPS Values                                                                            │
├─────────┼───────────────────────────────────────────────────────────────────────────────────────┤
│ 39.61   │ 1,35,45,31,40,45,43,46,33,40,33,22,45,36,48,41,51,34,43,42,30,46,48,33,38,40,33,45,43 │
└─────────┴───────────────────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-rher-simple
  react-redux version: 5.0.7
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-rher-simple:
┌─────────┬──────────────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ FPS Values                                                                               │
├─────────┼──────────────────────────────────────────────────────────────────────────────────────────┤
│ 51.97   │ 1,53,45,50,59,47,49,45,49,56,55,54,51,52,54,53,50,53,52,54,60,53,56,46,54,49,53,55,52,48 │
└─────────┴──────────────────────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-rrh
  react-redux version: 5.0.7
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-rrh:
┌─────────┬─────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ FPS Values                                                                      │
├─────────┼─────────────────────────────────────────────────────────────────────────────────┤
│ 52.81   │ 1,58,43,56,53,49,44,54,55,53,47,57,53,50,49,58,52,57,56,57,51,52,56,55,53,52,53 │
└─────────┴─────────────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-memo
  react-redux version: 5.0.7
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-memo:
┌─────────┬──────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ FPS Values                                                                       │
├─────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ 49.12   │ 39,54,42,52,49,46,43,47,48,53,47,51,53,46,52,46,52,43,47,53,47,56,51,52,47,51,49 │
└─────────┴──────────────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-dumb
  react-redux version: 5.0.7
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-dumb:
┌─────────┬─────────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ FPS Values                                                                          │
├─────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ 29.52   │ 22,26,34,28,24,25,29,32,30,29,23,24,37,26,24,33,29,27,33,31,35,34,28,38,30,29,30,29 │
└─────────┴─────────────────────────────────────────────────────────────────────────────────────┘

[dai-shi]

Average FPS in summary:

react-redux 5.0.7: 51.89
react-hooks-easy-redux v1.1.1 useReduxState: 39.61
react-hooks-easy-redux v1.1.1 useReduxStateSimple: 51.97
redux-react-hook v3.1.0: 52.81
bare useContext+useMemo: 49.12

[dai-shi]

It might be interesting to try with new commits in react-redux: reduxjs/react-redux#1177 (comment)

[markerikson]

Also might want to merge down from the latest version of the benchmarks repo - I've updated it to capture initial mount times and subsequent average render times.

[dai-shi]

Merged down from the upstream of the benchmarks repo.
Re-running tree-view-*:

$ git clone https://github.com/dai-shi/react-redux-benchmarks.git
$ cd react-redux-benchmarks
$ npm install
$ npm run initialize
$ REDUX=5.1.1 BENCHMARK_TRACE=false BENCHMARKS=tree-view:tree-view-rher:tree-view-rher-simple:tree-view-rrh:tree-view-memo:tree-view-dumb npm start

Running benchmark tree-view
  react-redux version: 5.1.1
    Checking max FPS... (30 seconds)

Results for benchmark tree-view:
┌─────────┬──────────────┬─────────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                          │
│         │ (Mount, Avg) │                                                                                     │
├─────────┼──────────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ 46.61   │ 954.7, 0.2   │ 49,42,49,42,35,40,43,48,56,48,54,43,54,50,47,48,51,48,52,46,45,43,44,41,47,43,51,51 │
└─────────┴──────────────┴─────────────────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-rher
  react-redux version: 5.1.1
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-rher:
┌─────────┬──────────────┬───────────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                            │
│         │ (Mount, Avg) │                                                                                       │
├─────────┼──────────────┼───────────────────────────────────────────────────────────────────────────────────────┤
│ 36.14   │ 1134.2, 3.2  │ 43,41,11,37,41,42,45,33,31,36,32,9,37,42,39,46,40,44,30,34,51,34,33,30,49,34,31,37,37 │
└─────────┴──────────────┴───────────────────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-rher-simple
  react-redux version: 5.1.1
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-rher-simple:
┌─────────┬──────────────┬───────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                    │
│         │ (Mount, Avg) │                                                                               │
├─────────┼──────────────┼───────────────────────────────────────────────────────────────────────────────┤
│ 47.46   │ 857.3, 1.4   │ 53,29,49,53,41,47,38,49,48,54,46,54,42,51,43,47,49,54,52,49,44,48,49,40,55,55 │
└─────────┴──────────────┴───────────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-rrh
  react-redux version: 5.1.1
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-rrh:
┌─────────┬──────────────┬─────────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                          │
│         │ (Mount, Avg) │                                                                                     │
├─────────┼──────────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ 48.59   │ 834.4, 1.1   │ 38,51,54,44,46,44,46,52,53,49,42,55,35,51,49,41,44,52,57,54,51,49,47,54,52,46,51,51 │
└─────────┴──────────────┴─────────────────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-memo
  react-redux version: 5.1.1
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-memo:
┌─────────┬──────────────┬──────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                       │
│         │ (Mount, Avg) │                                                                                  │
├─────────┼──────────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ 35.09   │ 518.2, 16.5  │ 42,35,30,35,38,36,25,29,34,30,24,36,35,41,44,35,40,32,38,40,25,36,42,38,30,46,46 │
└─────────┴──────────────┴──────────────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-dumb
  react-redux version: 5.1.1
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-dumb:
┌─────────┬──────────────┬───────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                    │
│         │ (Mount, Avg) │                                                                               │
├─────────┼──────────────┼───────────────────────────────────────────────────────────────────────────────┤
│ 17.66   │ 516.7, 87.0  │ 22,15,21,20,16,17,16,18,14,22,19,15,17,21,17,13,18,15,18,17,18,11,21,19,16,16 │
└─────────┴──────────────┴───────────────────────────────────────────────────────────────────────────────┘

[dai-shi]

react-hooks-easy-redux v1.1.1:

┌─────────┬──────────────┬─────────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                          │
│         │ (Mount, Avg) │                                                                                     │
├─────────┼──────────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ 39.13   │ 870.2, 2.1   │ 45,29,41,46,43,46,33,37,20,37,36,44,46,39,43,40,41,44,30,42,51,30,38,41,35,41,39,39 │
└─────────┴──────────────┴─────────────────────────────────────────────────────────────────────────────────────┘

react-hooks-easy-redux 23e2c5a -> v1.2.0:

┌─────────┬──────────────┬─────────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                          │
│         │ (Mount, Avg) │                                                                                     │
├─────────┼──────────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ 46.29   │ 690.0, 1.6   │ 44,28,48,53,50,39,46,29,50,48,51,50,45,53,40,48,49,41,46,48,46,50,54,48,50,51,46,46 │
└─────────┴──────────────┴─────────────────────────────────────────────────────────────────────────────────────┘

[dai-shi]

Rerun all benchmarks with react-hooks-easy-redux v1.2.0:

$ git clone https://github.com/dai-shi/react-redux-benchmarks.git
$ cd react-redux-benchmarks
$ npm install
$ npm run initialize
$ REDUX=5.1.1 BENCHMARK_TRACE=false BENCHMARKS=tree-view:tree-view-rher:tree-view-rher-simple:tree-view-rrh:tree-view-memo:tree-view-dumb npm start

Running benchmark tree-view
  react-redux version: 5.1.1
    Checking max FPS... (30 seconds)

Results for benchmark tree-view:
┌─────────┬──────────────┬──────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                       │
│         │ (Mount, Avg) │                                                                                  │
├─────────┼──────────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ 51.47   │ 593.7, 0.2   │ 51,50,53,45,49,50,53,52,53,46,53,54,51,49,53,51,53,55,53,54,49,50,53,55,54,48,48 │
└─────────┴──────────────┴──────────────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-rher
  react-redux version: 5.1.1
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-rher:
┌─────────┬──────────────┬─────────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                          │
│         │ (Mount, Avg) │                                                                                     │
├─────────┼──────────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ 46.25   │ 682.9, 1.5   │ 46,37,34,53,48,42,45,31,48,53,51,44,48,42,48,50,39,51,42,46,49,45,53,56,45,48,56,56 │
└─────────┴──────────────┴─────────────────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-rher-simple
  react-redux version: 5.1.1
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-rher-simple:
┌─────────┬──────────────┬────────────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                             │
│         │ (Mount, Avg) │                                                                                        │
├─────────┼──────────────┼────────────────────────────────────────────────────────────────────────────────────────┤
│ 49.57   │ 505.9, 1.0   │ 40,50,56,47,46,41,53,49,56,43,54,43,54,49,43,50,54,48,57,54,51,54,47,46,44,54,56,48,48 │
└─────────┴──────────────┴────────────────────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-rrh
  react-redux version: 5.1.1
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-rrh:
┌─────────┬──────────────┬────────────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                             │
│         │ (Mount, Avg) │                                                                                        │
├─────────┼──────────────┼────────────────────────────────────────────────────────────────────────────────────────┤
│ 49.57   │ 627.7, 1.1   │ 42,49,55,46,40,51,46,55,50,54,48,54,49,45,50,48,53,54,51,55,51,43,48,54,51,47,51,47,47 │
└─────────┴──────────────┴────────────────────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-memo
  react-redux version: 5.1.1
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-memo:
┌─────────┬──────────────┬────────────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                             │
│         │ (Mount, Avg) │                                                                                        │
├─────────┼──────────────┼────────────────────────────────────────────────────────────────────────────────────────┤
│ 37.15   │ 483.7, 14.7  │ 44,39,32,36,40,38,39,28,37,33,29,38,37,35,40,43,35,36,37,51,36,38,37,45,29,38,34,33,33 │
└─────────┴──────────────┴────────────────────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-dumb
  react-redux version: 5.1.1
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-dumb:
┌─────────┬──────────────┬────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                 │
│         │ (Mount, Avg) │                                                                            │
├─────────┼──────────────┼────────────────────────────────────────────────────────────────────────────┤
│ 17.72   │ 576.4, 81.5  │ 19,16,21,17,13,17,21,14,19,21,19,21,18,17,11,16,21,20,16,21,16,20,11,17,17 │
└─────────┴──────────────┴────────────────────────────────────────────────────────────────────────────┘

[dai-shi]

Benchmark Summary for various React/Redux libraries:

	Avg FPS	Render (Mount)	Render (Avg)
official react-redux v5.1.1	51.47	593.7	0.2
react-hooks-easy-redux v1.2.0	46.25	682.9	1.5
redux-react-hook v3.1.0	49.57	627.7	1.1

[markerikson]

Wanna try tossing the experimental v7 alpha in there too?

reduxjs/react-redux#1177 (comment)

[dai-shi]

Well, it's not very surprising.

$ BENCHMARK_TRACE=false BENCHMARKS=tree-view npm start 

Running benchmark tree-view
  react-redux version: 5.1.1
    Checking max FPS... (30 seconds)
  react-redux version: 6.0.0
    Checking max FPS... (30 seconds)
  react-redux version: 7.0.0-alpha.1
    Checking max FPS... (30 seconds)

Results for benchmark tree-view:
┌─────────┬──────────────┬──────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                       │
│         │ (Mount, Avg) │                                                                                  │
├─────────┼──────────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ 47.85   │ 706.7, 0.2   │ 48,46,52,44,43,42,48,50,47,51,43,54,48,46,47,49,53,49,46,47,45,50,52,48,48       │
├─────────┼──────────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ 32.80   │ 514.3, 18.1  │ 35,34,31,32,34,36,33,30,32,31,30,34,31,36,33,34,31,35,34,27,35,32,35,29,31,32,32 │
├─────────┼──────────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ 48.40   │ 605.6, 0.2   │ 47,55,43,45,48,52,55,47,51,46,50,47,44,47,50,54,47,50,49,46,43,50,51,50,48,48    │
└─────────┴──────────────┴──────────────────────────────────────────────────────────────────────────────────┘

$ REDUX=5.1.1 BENCHMARK_TRACE=false BENCHMARKS=tree-view-rher:tree-view-rher-simple:tree-view-rrh npm start 

Running benchmark tree-view-rher
  react-redux version: 5.1.1
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-rher:
┌─────────┬──────────────┬──────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                       │
│         │ (Mount, Avg) │                                                                                  │
├─────────┼──────────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ 42.16   │ 648.5, 1.6   │ 36,31,27,48,49,38,40,35,44,46,44,43,46,40,43,44,40,38,44,41,47,43,51,50,42,46,46 │
└─────────┴──────────────┴──────────────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-rher-simple
  react-redux version: 5.1.1
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-rher-simple:
┌─────────┬──────────────┬──────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                       │
│         │ (Mount, Avg) │                                                                                  │
├─────────┼──────────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ 46.24   │ 495.2, 1.1   │ 38,46,54,42,35,47,49,50,52,40,50,47,46,42,45,51,47,53,47,51,48,45,48,35,49,51,51 │
└─────────┴──────────────┴──────────────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-rrh
  react-redux version: 5.1.1
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-rrh:
┌─────────┬──────────────┬─────────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                          │
│         │ (Mount, Avg) │                                                                                     │
├─────────┼──────────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ 47.95   │ 469.2, 1.0   │ 38,49,53,43,44,40,49,54,50,48,44,50,45,50,48,50,48,55,52,51,52,45,46,43,51,44,51,51 │
└─────────┴──────────────┴─────────────────────────────────────────────────────────────────────────────────────┘