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 │
└─────────┴──────────────┴─────────────────────────────────────────────────────────────────────────────────────┘

[dai-shi]

Merged upstream/master which includes reduxjs/react-redux-benchmarks#19.

Rerun benchmarks with react-hooks-easy-redux v1.3.0:

$ git clone https://github.com/dai-shi/react-redux-benchmarks.git
$ cd react-redux-benchmarks
$ npm install
$ npm run initialize
$ BENCHMARK_TRACE=false BENCHMARKS=tree-view npm start
$ REDUX=5.1.1 BENCHMARK_TRACE=false BENCHMARKS=tree-view-rher:tree-view-rher-simple:tree-view-rrh 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-3
    Checking max FPS... (30 seconds)

Results for benchmark tree-view:
┌─────────┬──────────────┬─────────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                          │
│         │ (Mount, Avg) │                                                                                     │
├─────────┼──────────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ 51.46   │ 757.5, 0.2   │ 50,53,43,50,49,48,53,54,53,48,52,53,54,49,51,53,55,53,54,51,50,55,51,49,49          │
├─────────┼──────────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ 40.11   │ 560.5, 18.2  │ 42,39,36,40,49,41,37,34,37,38,42,37,45,46,41,39,38,49,31,41,45,37,38,45,37,44,35,35 │
├─────────┼──────────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ 51.62   │ 686.8, 0.2   │ 51,54,47,48,51,49,53,52,53,45,55,53,48,50,52,49,55,53,54,50,51,54,55,53,54,52,52    │
└─────────┴──────────────┴─────────────────────────────────────────────────────────────────────────────────────┘

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) │                                                                                        │
├─────────┼──────────────┼────────────────────────────────────────────────────────────────────────────────────────┤
│ 45.72   │ 726.2, 1.6   │ 43,35,34,53,51,42,43,32,45,44,52,51,47,50,46,45,51,36,50,44,41,49,48,50,57,43,49,51,51 │
└─────────┴──────────────┴────────────────────────────────────────────────────────────────────────────────────────┘
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) │                                                                                     │
├─────────┼──────────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ 50.01   │ 554.0, 1.2   │ 41,51,58,45,49,43,48,53,54,46,54,47,53,47,48,50,51,54,53,54,56,42,51,37,56,54,53,53 │
└─────────┴──────────────┴─────────────────────────────────────────────────────────────────────────────────────┘
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) │                                                                                  │
├─────────┼──────────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ 50.83   │ 507.2, 1.1   │ 42,53,54,45,42,52,50,54,52,49,54,50,48,52,57,51,57,50,49,46,57,54,53,47,51,50,50 │
└─────────┴──────────────┴──────────────────────────────────────────────────────────────────────────────────┘

[dai-shi]

I converted deeptree for react-hooks-easy-redux.
The result is below. This is very tough. @markerikson
I might have made a mistake when converting it, but we don't have getDerivedStateFromProps for hooks anyway. That may or may not be a reason.

Running benchmark deeptree
  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-3
    Checking max FPS... (30 seconds)

Results for benchmark deeptree:
┌─────────┬──────────────┬───────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                        │
│         │ (Mount, Avg) │                                                                   │
├─────────┼──────────────┼───────────────────────────────────────────────────────────────────┤
│ 21.99   │ 106.0, 0.1   │ 20,22,23,22,24,23,21,23,22,23,25,26,25,23,24,22,19,17,18,18       │
├─────────┼──────────────┼───────────────────────────────────────────────────────────────────┤
│ 20.60   │ 130.0, 2.6   │ 19,20,21,19,20,21,23,21,20,21,23,22,21,20,22,18,17,17             │
├─────────┼──────────────┼───────────────────────────────────────────────────────────────────┤
│ 40.32   │ 167.6, 1.4   │ 46,55,51,50,52,50,52,50,53,54,53,56,50,47,31,30,31,30,29,21,22,22 │
└─────────┴──────────────┴───────────────────────────────────────────────────────────────────┘

Running benchmark deeptree-rher
  react-redux version: *****
    Checking max FPS... (30 seconds)

Results for benchmark deeptree-rher:
┌─────────┬──────────────┬─────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                  │
│         │ (Mount, Avg) │                                                             │
├─────────┼──────────────┼─────────────────────────────────────────────────────────────┤
│ 18.31   │ 88.6, 0.1    │ 18,17,14,17,18,17,18,19,18,20,19,18,19,20,19,18,20,16,17,17 │
└─────────┴──────────────┴─────────────────────────────────────────────────────────────┘

[dai-shi]

getDerivedStateFromProps

Oops, Pair.jsx is not used at all...

[markerikson]

@dai-shi : yeah, there's a bunch of junk left over in some of those benchmarks that I need to clean up :)

[dai-shi]

Latest benchmark results

react-redux 5.1.1

Results for benchmark tree-view:
┌─────────┬──────────────┬──────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                           │
│         │ (Mount, Avg) │                                                                      │
├─────────┼──────────────┼──────────────────────────────────────────────────────────────────────┤
│ 51.67   │ 575.0, 0.2   │ 49,53,48,47,50,48,54,52,54,49,50,55,50,53,55,54,49,51,56,52,53,49,49 │
└─────────┴──────────────┴──────────────────────────────────────────────────────────────────────┘

Results for benchmark deeptree:
┌─────────┬──────────────┬─────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                  │
│         │ (Mount, Avg) │                                                             │
├─────────┼──────────────┼─────────────────────────────────────────────────────────────┤
│ 22.37   │ 112.1, 0.1   │ 20,23,24,22,21,22,23,25,23,24,23,25,24,26,23,25,26,18,17,17 │
└─────────┴──────────────┴─────────────────────────────────────────────────────────────┘

react-redux 7.0.0.beta-0

Results for benchmark tree-view:
┌─────────┬──────────────┬───────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                    │
│         │ (Mount, Avg) │                                                                               │
├─────────┼──────────────┼───────────────────────────────────────────────────────────────────────────────┤
│ 52.19   │ 653.0, 0.2   │ 52,54,47,52,50,54,55,47,53,54,50,49,55,53,56,51,56,55,49,51,55,54,52,51,49,49 │
└─────────┴──────────────┴───────────────────────────────────────────────────────────────────────────────┘

Results for benchmark deeptree:
┌─────────┬──────────────┬─────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                              │
│         │ (Mount, Avg) │                                                                         │
├─────────┼──────────────┼─────────────────────────────────────────────────────────────────────────┤
│ 40.62   │ 121.1, 1.4   │ 50,51,53,50,51,48,50,53,51,52,50,53,54,53,49,31,30,32,31,30,23,22,21,21 │
└─────────┴──────────────┴─────────────────────────────────────────────────────────────────────────┘

react-hooks-easy-redux 1.4.0

Results for benchmark tree-view-rher:
┌─────────┬──────────────┬─────────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                          │
│         │ (Mount, Avg) │                                                                                     │
├─────────┼──────────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ 47.45   │ 677.8, 1.5   │ 51,29,47,56,45,46,36,49,45,51,52,47,54,42,49,50,43,44,45,53,49,50,56,47,52,44,43,43 │
└─────────┴──────────────┴─────────────────────────────────────────────────────────────────────────────────────┘

Results for benchmark deeptree-rher:
┌─────────┬──────────────┬────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                 │
│         │ (Mount, Avg) │                                                                            │
├─────────┼──────────────┼────────────────────────────────────────────────────────────────────────────┤
│ 39.06   │ 99.3, 0.8    │ 48,49,42,46,48,45,47,51,47,49,45,51,50,31,27,28,29,27,28,27,29,28,29,21,21 │
└─────────┴──────────────┴────────────────────────────────────────────────────────────────────────────┘

[markerikson]

@dai-shi : I'd encourage you to try to get the other benchmarks working too for comparison

[dai-shi]

setup

git clone https://github.com/dai-shi/react-redux-benchmarks.git
cd react-redux-benchmarks
npm install
npm run initialize
REDUX=7.0.0.beta-0 BENCHMARK_TRACE=false BENCHMARKS=tree-view:tree-view-rher:deeptree:deeptree-rher:twitter-lite:twitter-lite-rher npm start

results

tree-view (react-redux 7.0.0.beta-0)

┌─────────┬──────────────┬───────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                    │
│         │ (Mount, Avg) │                                                                               │
├─────────┼──────────────┼───────────────────────────────────────────────────────────────────────────────┤
│ 52.25   │ 817.5, 0.2   │ 51,55,45,48,52,50,53,55,56,47,54,52,49,52,53,56,51,56,55,51,53,56,54,51,55,55 │
└─────────┴──────────────┴───────────────────────────────────────────────────────────────────────────────┘

tree-view (react-hooks-easy-redux 1.6.0)

┌─────────┬──────────────┬────────────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                             │
│         │ (Mount, Avg) │                                                                                        │
├─────────┼──────────────┼────────────────────────────────────────────────────────────────────────────────────────┤
│ 47.68   │ 658.4, 1.5   │ 51,27,48,54,45,46,35,50,43,53,54,44,54,41,49,48,42,44,48,54,45,56,55,51,55,51,43,50,50 │
└─────────┴──────────────┴────────────────────────────────────────────────────────────────────────────────────────┘

deeptree (react-redux 7.0.0.beta-0)

┌─────────┬──────────────┬────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                 │
│         │ (Mount, Avg) │                                                                            │
├─────────┼──────────────┼────────────────────────────────────────────────────────────────────────────┤
│ 40.34   │ 108.1, 1.4   │ 51,53,52,54,51,50,52,47,54,52,54,52,44,31,25,30,27,32,31,32,24,23,21,22,22 │
└─────────┴──────────────┴────────────────────────────────────────────────────────────────────────────┘

deeptree (react-hooks-easy-redux 1.6.0)

┌─────────┬──────────────┬────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                 │
│         │ (Mount, Avg) │                                                                            │
├─────────┼──────────────┼────────────────────────────────────────────────────────────────────────────┤
│ 39.10   │ 87.3, 0.9    │ 48,53,47,49,50,49,46,47,48,49,51,48,52,30,29,30,29,33,29,31,29,21,20,21,21 │
└─────────┴──────────────┴────────────────────────────────────────────────────────────────────────────┘

twitter-lite (react-redux 7.0.0.beta-0)

┌─────────┬──────────────┬──────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                           │
│         │ (Mount, Avg) │                                                                      │
├─────────┼──────────────┼──────────────────────────────────────────────────────────────────────┤
│ 48.95   │ 3.9, 0.3     │ 59,60,59,60,58,60,58,60,55,60,56,51,47,44,38,39,37,31,33,31,28,30,30 │
└─────────┴──────────────┴──────────────────────────────────────────────────────────────────────┘

twitter-lite (react-hooks-easy-redux 1.6.0) with React.memo (is it fair?)

┌─────────┬──────────────┬──────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                           │
│         │ (Mount, Avg) │                                                                      │
├─────────┼──────────────┼──────────────────────────────────────────────────────────────────────┤
│ 56.22   │ 3.1, 1.1     │ 59,60,59,60,59,60,59,60,52,56,54,60,58,56,59,58,57,56,51,49,44,31,31 │
└─────────┴──────────────┴──────────────────────────────────────────────────────────────────────┘

[faceyspacey]

Very compelling results. It almost feels like in real world usage with complex apps, using @theKashey's proxyequal will be faster than manual specification of mapStateToProps.

Mount and Avg are millseconds (for initial component mount and average re-render), correct?

[dai-shi]

Mount and Avg are millseconds (for initial component mount and average re-render), correct?

Guess so. @markerikson ?

in real world usage with complex apps

We really want to run benchmarks with real-world examples.

be faster than manual specification of mapStateToProps

That's my expectation too. 😉
(Technically, the manual optimization should always win, but not everyone are experts for optimization.)

[theKashey]

Wow. This is amazing! Magic out of the box!

Technically, the manual optimization should always win, but not everyone are experts for optimization.

That was a reason I've started all this. I had too many cases when manual memoization, selection and optimization would be too hard, even with years of experience.

After a year fully into it(proxyqual was released exactly a year ago) I don't see any problem with it for myself, but I remember how I struggle, and I could see the same sadness in the eyes of mine friends.

Anyway - I remember that a few my applications(displaying biiiig tables) got slower after adding beautiful-react-redux(proxyequal "on" mapStateToProp). And not the tracking was a problem, but shouldInstrument called before Proxy creation.

I should double check it.

[markerikson]

Yes, the times in that "render" column are in milliseconds.

FWIW, long-term I'm totally interested in the idea of "auto-magic" behavior in React-Redux itself. However, my own focus for now has to simply be on making sure that the current implementation works as needed (and as expected).

So, please keep on experimenting with this stuff, and perhaps if it works out, we may be able to adopt some of your work.

[theKashey]

like :mindblow: slices :mindblow:

[dai-shi]

shouldInstrument

I was just looking at it last weekend. I thought the use of Map is not necessary, and tried eliminating it.
However, it didn't make a big difference in the current benchmark scenarios (namely, tree-view and deeptree at that point),
probably due to the fact the number of components doesn't increase in those scenarios.

[dai-shi]

@epeli You might want to check some benchmark results here. I'm now converting another scenario.

[dai-shi]

Newly converted benchmark: stockticker

how to run

git clone https://github.com/dai-shi/react-redux-benchmarks.git
cd react-redux-benchmarks
npm install
npm run initialize
REDUX=7.0.0.beta-0 BENCHMARK_TRACE=false BENCHMARKS=stockticker:stockticker-rher npm start

react-redux 7.0.0.beta-0

Results for benchmark stockticker:
┌─────────┬──────────────┬────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                 │
│         │ (Mount, Avg) │                                                                            │
├─────────┼──────────────┼────────────────────────────────────────────────────────────────────────────┤
│ 51.48   │ 330.0, 0.3   │ 48,44,40,47,54,52,53,51,54,55,53,52,54,52,54,53,54,53,51,52,51,52,53,55,55 │
└─────────┴──────────────┴────────────────────────────────────────────────────────────────────────────┘

react-hooks-easy-redux 1.6.0

Results for benchmark stockticker-rher:
┌─────────┬──────────────┬─────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                  │
│         │ (Mount, Avg) │                                                             │
├─────────┼──────────────┼─────────────────────────────────────────────────────────────┤
│ 27.00   │ 277.5, 0.3   │ 26,29,28,26,29,28,29,28,29,27,28,27,28,26,25,26,27,26,27,27 │
└─────────┴──────────────┴─────────────────────────────────────────────────────────────┘

This is tough, maybe because of getDerivedStateFromProps(), which can't be implemented in hooks. I mimicked with useMemo. Is there any better implementation?

[dai-shi]

#3 (comment)

Here's the other thing to check:
the action ${c.UPDATE_PAIR}_${sliceId}
should not trigger a re-render in the parent Slice:

No problem with this. It just renders only once.

[dai-shi]

stockticker benchmarks

how to run

git clone https://github.com/dai-shi/react-redux-benchmarks.git
cd react-redux-benchmarks
git checkout e3f37855e2969591c51b3e14262969d6d426fa37
npm install
rm sources/*/yarn.lock
BENCHMARKS=stockticker:stockticker-useReduxState:stockticker-useReduxStateMapped:stockticker-rrh npm run initialize
REDUX=7.0.0-beta.0 BENCHMARK_TRACE=false BENCHMARKS=stockticker:stockticker-useReduxState:stockticker-useReduxStateMapped:stockticker-rrh npm start

results

Running benchmark stockticker
    Checking max FPS... (30 seconds)

Results for benchmark stockticker:
┌─────────┬──────────────┬──────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                       │
│         │ (Mount, Avg) │                                                                                  │
├─────────┼──────────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ 52.10   │ 297.6, 0.3   │ 49,50,54,52,54,46,54,53,55,56,54,53,51,56,53,56,53,55,53,51,49,51,50,52,50,49,49 │
└─────────┴──────────────┴──────────────────────────────────────────────────────────────────────────────────┘
Running benchmark stockticker-useReduxState
    Checking max FPS... (30 seconds)

Results for benchmark stockticker-useReduxState:
┌─────────┬──────────────┬────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                     │
│         │ (Mount, Avg) │                                                                │
├─────────┼──────────────┼────────────────────────────────────────────────────────────────┤
│ 26.07   │ 276.4, 0.3   │ 25,27,28,27,28,26,27,26,27,25,27,25,27,26,25,26,25,26,25,24,24 │
└─────────┴──────────────┴────────────────────────────────────────────────────────────────┘
Running benchmark stockticker-useReduxStateMapped
    Checking max FPS... (30 seconds)

Results for benchmark stockticker-useReduxStateMapped:
┌─────────┬──────────────┬───────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                        │
│         │ (Mount, Avg) │                                                                   │
├─────────┼──────────────┼───────────────────────────────────────────────────────────────────┤
│ 26.05   │ 293.6, 0.3   │ 24,27,28,27,26,28,26,28,27,26,27,26,25,26,25,26,27,25,26,24,25,25 │
└─────────┴──────────────┴───────────────────────────────────────────────────────────────────┘
Running benchmark stockticker-rrh
    Checking max FPS... (30 seconds)

Results for benchmark stockticker-rrh:
┌─────────┬──────────────┬──────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                               │
│         │ (Mount, Avg) │                                                          │
├─────────┼──────────────┼──────────────────────────────────────────────────────────┤
│ 28.91   │ 185.4, 0.9   │ 28,31,30,31,30,31,30,31,28,29,28,27,29,27,28,26,29,28,28 │
└─────────┴──────────────┴──────────────────────────────────────────────────────────┘

notes

• stockticker is react-redux
• stockticker-useReduxState and stockticker-useReduxStateMapped are two variants from reactive-react-redux
• stockticker-rrh is redux-react-hook

[theKashey]

It's good to have a slow example - easier to detect friction points (is there any?)

[markerikson]

FWIW, I'd suggest focusing on the deeptree and deeptree-nested benchmarks as being more representative of typical update patterns.

[faceyspacey]

Agreed. This one isn't something you'd do in a normal Redux app (i.e. it's quite contrived).

However we gotta get to the bottom of what makes the proxy solution slow here. It's an important clue regarding the current weakness of this approach.

[dai-shi]

focusing on the deeptree and deeptree-nested benchmarks

Understood.

It's an important clue regarding the current weakness of this approach.

Agreed too.

(is there any?)

I have no clue at the moment.

[faceyspacey]

If it's just a consequence of the work Proxies are doing, a non-redux benchmark of calling the mapStateToProps function vs the equivalent with proxies might be revealing.

I.e. it might be useful to get a real idea how many cycles the proxy approach is running through.

[theKashey]

There are a few obvious wars to speed up it a bit:

• change proxyequal reporting model. Right now it’s a long strings, what is object model would be faster?
• proxyCompare? There is another function - proxyShallowEqual - which does the same in respect of object nesting, ie capable to skip nested object comparison, if parent is the same. (Could benefit from idea 1)
• collectValuables, currently called every tick. What if on every “report” change some hash, and if new hash === oldHash - return last valuables. Something like memoization.

Proxyequal is very hot spot, and it’s probably worth to rewrite it. We might keep all the tests to keep it “right” (I’ll add a few failing ones), and make it more perfomant.

[dai-shi]

1: string concatenation vs. object creation. not sure which is faster.
2: I may misunderstood proxyShallowEqual. So, can I use it for this project?
3: If we can avoid collectValuables with small cost, that would be awesome. Note that collectValuables is invoked only once in render now, and the bottleneck is not render but comparison for these benchmarks.

[theKashey]

1: string concatenation and de-concatenation vs. object creation. It's more about CPU vs GC.
2. proxyShallowEqual is meant to be faster for deeper objects. But is it fast - I don't know. Probably I should replace Maps by plain objects. And yes - you may use it, memoize-state is using it. But it's a more theoretical correct concept, than real. I am not sure about some decisions of mine after you have refactored 🤷‍♂️normal🤷‍♂️ function to be 10 times faster.
3. collectValuables could be an easy win, if hash calculation would be cheap enough.

[dai-shi]

What is proxyShallow? I confused it with proxyShallowEqual.

[theKashey]

So what I am going to spike:

1. how tracking is working - right now it's pushing keys to an array. Longer and longer strings with every nested access. What if use objects, and nest objects access as objects could be nested

2. how valuable access is calculated. It has no understood nesting, and could memoize last access, as long as in our case it's almost always the same. The same memoization could make .1 more perfomant, if "new" access is mocking the last one (in terms of v8 hidden classes).

3. how proxies got removed. Probably we shall hook into createElement to deproxify and update usage information for the objects passed down as-is.

In short - gonna rewrite proxyequal from a scratch.

[dai-shi]

FYI: just replacing with proxyShallowEqual was slower.

[theKashey]

Not a surprise - it was faster than proxyCompare, but then you optimized proxyCompare and it becomes slower.

[dai-shi]

With regard to stockticker-useReduxState, I have one clue. It's Slice.jsx.
I found that affected is very long. ex:

(878) [".0.map", ".0.length", ".0.constructor", ".0.0.id", ".0.1.id", ".0.2.id", ".0.3.id", ".0.4.id", ".0.5.id", ".0.6.id", ".0.7.id", ".0.8.id", ".0.9.id", ".0.10.id", ".0.11.id", ".0.12.id", ".0.13.id", ".0.14.id", ".0.15.id", ".0.16.id", ".0.17.id", ".0.18.id", ".0.19.id", ".0.20.id", ".0.21.id", ".0.22.id", ".0.23.id", ".0.24.id", ".0.25.id", ".0.26.id", ".0.27.id", ".0.28.id", ".0.29.id", ".0.30.id", ".0.31.id", ".0.32.id", ".0.33.id", ".0.34.id", ".0.35.id", ".0.36.id", ".0.37.id", ".0.38.id", ".0.39.id", ".0.40.id", ".0.41.id", ".0.42.id", ".0.43.id", ".0.44.id", ".0.45.id", ".0.46.id", ".0.47.id", ".0.48.id", ".0.49.id", ".0.50.id", ".0.51.id", ".0.52.id", ".0.53.id", ".0.54.id", ".0.55.id", ".0.56.id", ".0.57.id", ".0.58.id", ".0.59.id", ".0.60.id", ".0.61.id", ".0.62.id", ".0.63.id", ".0.64.id", ".0.65.id", ".0.66.id", ".0.67.id", ".0.68.id", ".0.69.id", ".0.70.id", ".0.71.id", ".0.72.id", ".0.73.id", ".0.74.id", ".0.75.id", ".0.76.id", ".0.77.id", ".0.78.id", ".0.79.id", ".0.80.id", ".0.81.id", ".0.82.id", ".0.83.id", ".0.84.id", ".0.85.id", ".0.86.id", ".0.87.id", ".0.88.id", ".0.89.id", ".0.90.id", ".0.91.id", ".0.92.id", ".0.93.id", ".0.94.id", ".0.95.id", ".0.96.id", …]

It won't trigger render, but comparing every time obviously.
Just tried simply skipping comparing if the affected is very long.

baseline

┌─────────┬──────────────┬──────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                               │
│         │ (Mount, Avg) │                                                          │
├─────────┼──────────────┼──────────────────────────────────────────────────────────┤
│ 21.36   │ 398.5, 0.3   │ 21,23,24,22,23,18,17,22,23,24,22,18,13,17,21,22,23,22,22 │
└─────────┴──────────────┴──────────────────────────────────────────────────────────┘

with the hack

┌─────────┬──────────────┬──────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                           │
│         │ (Mount, Avg) │                                                                      │
├─────────┼──────────────┼──────────────────────────────────────────────────────────────────────┤
│ 26.88   │ 332.6, 0.3   │ 26,30,29,27,29,25,29,28,26,25,29,27,19,20,25,28,27,26,28,26,27,28,28 │
└─────────┴──────────────┴──────────────────────────────────────────────────────────────────────┘

---

Still, there seems to be some other causes, to compare with react-redux's 40~50FPS.

For reference, here the code of Slice.jsx:

import React from "react";
import { useReduxState, useReduxDispatch } from "reactive-react-redux";

import Pair from "./Pair";
import { fillPairs } from "./pairActions";

const Slice = ({ idx }) => {
  const state = useReduxState();
  const dispatch = useReduxDispatch();
  const slice = state[idx];
  return (
    <ul className="list-group">
      {slice.map(pair => {
        return <Pair key={pair.id} sliceId={idx} pairId={pair.id} />;
      })}
    </ul>
  );
};
Slice.displayName = "Slice";

export default Slice;

[theKashey]

proxyShallowCompare would compare only .0 and go deeper only it makes a sense. So it worth to be rewritten.

[dai-shi]

Instead of react-redux-benchmarks, I tried benchmark with js-framework-benchmark.

The result seems somewhat realistic, doesn't it?
The benchmark repo

[dai-shi]

With regard to stockticker-useReduxState, I have one clue. It's Slice.jsx.

This wasn't the main reason of the slowness. The slowness is more by many comparisons with small affected like the following.

[".1", ".1.267", ".1.267.value", ".1.267.name"]

[theKashey]

Death by a thousands cuts. Probably it worth so store used keys in a nested object form the beginning, then we would be able to:

1. fastely compare them, without any preprocessing needed
2. utilize v8 hidden classes if many objects uses similar objects. In this case it would be {value, name}

[dai-shi]

Comparing v2 and v3

useReduxState in v2.0.1

git clone https://github.com/dai-shi/react-redux-benchmarks.git
cd react-redux-benchmarks
git checkout 43cc0b92fef86ee222014e3263704be34da29556
npm install
rm sources/*/yarn.lock
BENCHMARKS=deeptree-nested-useReduxState:deeptree-useReduxState:forms-useReduxState:stockticker-useReduxState:tree-view-useReduxState:twitter-lite-useReduxState npm run initialize
REDUX=7.0.2 BENCHMARK_TRACE=false BENCHMARKS=deeptree-nested-useReduxState:deeptree-useReduxState:forms-useReduxState:stockticker-useReduxState:tree-view-useReduxState:twitter-lite-useReduxState npm start

Running benchmark deeptree-nested-useReduxState
    Checking max FPS... (30 seconds)

Results for benchmark deeptree-nested-useReduxState:
┌─────────┬──────────────┬─────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                              │
│         │ (Mount, Avg) │                                                                         │
├─────────┼──────────────┼─────────────────────────────────────────────────────────────────────────┤
│ 50.96   │ 174.2, 0.5   │ 51,57,58,57,60,57,54,55,56,57,53,54,48,47,43,45,46,45,42,44,45,40,41,41 │
└─────────┴──────────────┴─────────────────────────────────────────────────────────────────────────┘
Running benchmark deeptree-useReduxState
    Checking max FPS... (30 seconds)

Results for benchmark deeptree-useReduxState:
┌─────────┬──────────────┬────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                 │
│         │ (Mount, Avg) │                                                                            │
├─────────┼──────────────┼────────────────────────────────────────────────────────────────────────────┤
│ 38.09   │ 84.4, 0.8    │ 46,45,48,47,45,43,44,48,46,45,49,46,48,45,28,29,28,29,28,29,28,26,23,21,21 │
└─────────┴──────────────┴────────────────────────────────────────────────────────────────────────────┘
Running benchmark forms-useReduxState
    Checking max FPS... (30 seconds)

Results for benchmark forms-useReduxState:
┌─────────┬──────────────┬────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                     │
│         │ (Mount, Avg) │                                                                │
├─────────┼──────────────┼────────────────────────────────────────────────────────────────┤
│ 56.71   │ 1141.9, 0.3  │ 56,57,58,56,57,56,57,58,60,58,55,54,56,58,57,55,56,55,59,57,57 │
└─────────┴──────────────┴────────────────────────────────────────────────────────────────┘
Running benchmark stockticker-useReduxState
    Checking max FPS... (30 seconds)

Results for benchmark stockticker-useReduxState:
┌─────────┬──────────────┬───────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                        │
│         │ (Mount, Avg) │                                                                   │
├─────────┼──────────────┼───────────────────────────────────────────────────────────────────┤
│ 25.20   │ 292.9, 0.2   │ 25,26,27,25,26,25,26,27,26,24,26,25,24,25,23,25,24,25,24,25,24,24 │
└─────────┴──────────────┴───────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-useReduxState
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-useReduxState:
┌─────────┬──────────────┬─────────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                          │
│         │ (Mount, Avg) │                                                                                     │
├─────────┼──────────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ 47.08   │ 687.7, 1.4   │ 49,29,44,54,47,42,45,36,50,51,48,52,42,48,49,42,45,47,44,51,48,55,52,50,51,47,51,51 │
└─────────┴──────────────┴─────────────────────────────────────────────────────────────────────────────────────┘
Running benchmark twitter-lite-useReduxState
    Checking max FPS... (30 seconds)

Results for benchmark twitter-lite-useReduxState:
┌─────────┬──────────────┬────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                 │
│         │ (Mount, Avg) │                                                                            │
├─────────┼──────────────┼────────────────────────────────────────────────────────────────────────────┤
│ 55.14   │ 3.1, 0.9     │ 60,59,60,59,60,59,58,59,60,59,55,59,55,56,60,57,58,54,51,47,46,44,34,36,36 │
└─────────┴──────────────┴────────────────────────────────────────────────────────────────────────────┘

useReduxState in v3.0.0

git clone https://github.com/dai-shi/react-redux-benchmarks.git
cd react-redux-benchmarks
git checkout 09d621170ca2536ba14001b40972bb39c8f72191
npm install
rm sources/*/yarn.lock
BENCHMARKS=deeptree-nested-useReduxState:deeptree-useReduxState:forms-useReduxState:stockticker-useReduxState:tree-view-useReduxState:twitter-lite-useReduxState npm run initialize
REDUX=7.0.2 BENCHMARK_TRACE=false BENCHMARKS=deeptree-nested-useReduxState:deeptree-useReduxState:forms-useReduxState:stockticker-useReduxState:tree-view-useReduxState:twitter-lite-useReduxState npm start

Running benchmark deeptree-nested-useReduxState
    Checking max FPS... (30 seconds)

Results for benchmark deeptree-nested-useReduxState:
┌─────────┬──────────────┬────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                     │
│         │ (Mount, Avg) │                                                                │
├─────────┼──────────────┼────────────────────────────────────────────────────────────────┤
│ 51.60   │ 171.5, 0.4   │ 60,59,56,60,58,56,55,54,57,56,50,47,45,46,44,47,46,44,41,45,45 │
└─────────┴──────────────┴────────────────────────────────────────────────────────────────┘
Running benchmark deeptree-useReduxState
    Checking max FPS... (30 seconds)

Results for benchmark deeptree-useReduxState:
┌─────────┬──────────────┬────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                     │
│         │ (Mount, Avg) │                                                                │
├─────────┼──────────────┼────────────────────────────────────────────────────────────────┤
│ 39.27   │ 91.2, 0.6    │ 48,47,50,52,46,47,51,49,45,48,52,54,30,29,32,30,29,30,28,21,21 │
└─────────┴──────────────┴────────────────────────────────────────────────────────────────┘
Running benchmark forms-useReduxState
    Checking max FPS... (30 seconds)

Results for benchmark forms-useReduxState:
┌─────────┬──────────────┬─────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                  │
│         │ (Mount, Avg) │                                                             │
├─────────┼──────────────┼─────────────────────────────────────────────────────────────┤
│ 56.61   │ 1070.2, 0.3  │ 54,55,56,55,56,60,54,56,57,58,57,58,57,56,57,58,57,58,56,56 │
└─────────┴──────────────┴─────────────────────────────────────────────────────────────┘
Running benchmark stockticker-useReduxState
    Checking max FPS... (30 seconds)

Results for benchmark stockticker-useReduxState:
┌─────────┬──────────────┬─────────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                          │
│         │ (Mount, Avg) │                                                                                     │
├─────────┼──────────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ 52.92   │ 218.8, 0.2   │ 53,59,54,58,59,58,57,56,54,55,56,55,52,50,54,55,53,49,48,50,53,49,52,51,49,47,49,49 │
└─────────┴──────────────┴─────────────────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view-useReduxState
    Checking max FPS... (30 seconds)

Results for benchmark tree-view-useReduxState:
┌─────────┬──────────────┬────────────────────────────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                                             │
│         │ (Mount, Avg) │                                                                                        │
├─────────┼──────────────┼────────────────────────────────────────────────────────────────────────────────────────┤
│ 50.58   │ 533.3, 1.2   │ 42,52,58,45,50,42,49,54,52,55,46,53,46,53,50,52,51,56,54,52,55,50,48,43,56,52,53,45,45 │
└─────────┴──────────────┴────────────────────────────────────────────────────────────────────────────────────────┘
Running benchmark twitter-lite-useReduxState
    Checking max FPS... (30 seconds)

Results for benchmark twitter-lite-useReduxState:
┌─────────┬──────────────┬────────────────────────────────────────────────────────────────┐
│ Avg FPS │ Render       │ FPS Values                                                     │
│         │ (Mount, Avg) │                                                                │
├─────────┼──────────────┼────────────────────────────────────────────────────────────────┤
│ 59.02   │ 3.2, 0.9     │ 60,59,60,59,60,59,60,59,60,59,60,59,57,59,58,60,57,60,59,55,55 │
└─────────┴──────────────┴────────────────────────────────────────────────────────────────┘

Summary

	useReduxState in v2.0.1	useReduxState in v3.0.0
deeptree-nested	50.96	51.60
deeptree	38.09	39.27
forms	56.71	56.61
stockticker	25.20	52.92
tree-view	47.08	50.58
twitter-lite	55.14	59.02

Numbers are Avg FPS.

[dai-shi]

Benchmark with js-framework-benchmark forked repo

[dai-shi]

Just for fun, I ran a single benchmark (deeptree-nested) with all versions to see the change over development time.

run-history-sh.txt
result.txt

Don't trust the numbers too much, like v2.0.0 and v2.0.1 shouldn't be that different.

[theKashey]

Thats amazing! Not only performance boost, but also the graphs.

[dai-shi]

The latest benchmark result with js-framework-benchmark.
https://github.com/dai-shi/js-framework-benchmark/tree/79d190d6ac1269b6f2e6bf3a98143e5b1eb9a9d4

[dai-shi]

I wouldn't care much, but "Startup metrics" show slowness for reactive-react-redux. I'm curious a bit.
On the other hand, The slowness in "Memory allocation" makes sense as we cache a lot.

[theKashey]

Just 10% slower. And you might spent months to make it 5% faster. I would propose just keep it as is, and revisit it after... vacations. Always helps with new ideas.

[dai-shi]

I'd close this issue. Some of early discussions are no longer valid. Let's open a new issue for further discussions.

The latest benchmark result as of writing is here.