Benchmarking state usage tracking and other related projects

[dai-shi]

Continuing from #3:

At this point, we only use js-framework-benchmark, but it would be nice to try with react-redux-benchmarks.

[dai-shi]

https://github.com/dai-shi/js-framework-benchmark/tree/f7e8f446ed2ecc43ac7587684b74451bb11a0cc9
Re-run with reactive-react-redux v4.1.0 and react-tracked v0.7.0.

[dai-shi]

Here's the latest react-redux-benchmarks results. https://github.com/dai-shi/react-redux-benchmarks/tree/d504624c159958aab5d0a47e9555872be010f2da.

Raw output

$ node ./runBenchmarks.js
Running benchmark deeptree
  react-redux type-version: connect-5.1.1
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: connect-6.0.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: connect-7.1.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: useSelector-7.1.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: useSelector-rrr-4.2.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: useTrackedState-rrr-4.2.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)

Results for benchmark deeptree:
┌───────────────────────────┬─────────┬──────────────┬───────────┬───────────┬──────────┬─────────────────────────────────────────────────────────────────────────┐
│ Type-Version              │ Avg FPS │ Render       │ Scripting │ Rendering │ Painting │ FPS Values                                                              │
│                           │         │ (Mount, Avg) │           │           │          │                                                                         │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ connect-5.1.1             │ 23.12   │ 118.7, 0.1   │ 19747.24  │ 6009.08   │ 2371.71  │ 22,24,22,25,24,23,26,23,24,23,24,25,26,25,20,17,19,18,19,19             │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ connect-6.0.0             │ 14.11   │ 90.8, 4.5    │ 24127.39  │ 3362.54   │ 1366.11  │ 14,13,14,15,14,13,14,15,14,15,14,14                                     │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ connect-7.1.0             │ 41.72   │ 107.7, 0.6   │ 10367.16  │ 10305.98  │ 5719.96  │ 51,55,54,55,52,56,54,55,53,54,43,33,32,31,33,32,22,23,22,23,23          │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ useSelector-7.1.0         │ 44.61   │ 82.4, 0.5    │ 9690.65   │ 10776.30  │ 5909.30  │ 57,59,57,59,60,59,55,60,59,42,34,33,35,28,24,25,23,24,24                │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ useSelector-rrr-4.2.0     │ 44.56   │ 72.9, 0.7    │ 9506.13   │ 10813.97  │ 6015.37  │ 56,58,59,58,57,60,59,60,59,58,42,35,34,33,30,23,24,22,24,24             │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ useTrackedState-rrr-4.2.0 │ 39.98   │ 81.1, 1.0    │ 9950.90   │ 10477.39  │ 5857.69  │ 44,45,34,33,38,52,54,58,56,53,54,47,32,33,32,34,32,25,31,32,25,23,19,19 │
└───────────────────────────┴─────────┴──────────────┴───────────┴───────────┴──────────┴─────────────────────────────────────────────────────────────────────────┘
Running benchmark deeptree-nested
  react-redux type-version: connect-5.1.1
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: connect-6.0.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: connect-7.1.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: useSelector-7.1.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: useSelector-rrr-4.2.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: useTrackedState-rrr-4.2.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)

Results for benchmark deeptree-nested:
┌───────────────────────────┬─────────┬──────────────┬───────────┬───────────┬──────────┬───────────────────────────────────────────────────────────────────────────────┐
│ Type-Version              │ Avg FPS │ Render       │ Scripting │ Rendering │ Painting │ FPS Values                                                                    │
│                           │         │ (Mount, Avg) │           │           │          │                                                                               │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼───────────────────────────────────────────────────────────────────────────────┤
│ connect-5.1.1             │ 51.14   │ 179.8, 0.7   │ 7196.08   │ 4557.65   │ 1783.12  │ 57,58,55,56,57,56,55,54,55,53,55,53,46,44,45,46,48,46,44,42,45,43,45,42,42    │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼───────────────────────────────────────────────────────────────────────────────┤
│ connect-6.0.0             │ 17.03   │ 130.3, 6.3   │ 20360.52  │ 3719.39   │ 824.22   │ 19,18,19,20,21,20,23,21,18,20,19,14,15,14,15,13,14,12,13,12,14,14             │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼───────────────────────────────────────────────────────────────────────────────┤
│ connect-7.1.0             │ 52.22   │ 142.2, 0.4   │ 6322.56   │ 4484.55   │ 1793.23  │ 58,59,58,59,58,57,56,54,57,55,54,48,49,44,46,48,45,49,45,44,43,46,42,43,43    │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼───────────────────────────────────────────────────────────────────────────────┤
│ useSelector-7.1.0         │ 52.59   │ 103.5, 0.4   │ 5315.03   │ 4532.30   │ 1817.59  │ 58,60,57,59,58,59,58,55,57,56,54,57,55,57,50,48,49,50,46,50,48,46,43,48,45,45 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼───────────────────────────────────────────────────────────────────────────────┤
│ useSelector-rrr-4.2.0     │ 52.99   │ 105.4, 1.4   │ 5082.65   │ 4480.35   │ 1824.95  │ 58,59,58,59,58,57,58,56,55,56,55,57,56,55,51,46,49,50,48,47,44,48,47,46,45,45 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼───────────────────────────────────────────────────────────────────────────────┤
│ useTrackedState-rrr-4.2.0 │ 53.08   │ 120.5, 1.2   │ 4711.62   │ 4485.96   │ 1809.16  │ 58,59,58,56,57,56,57,55,47,50,49,50,49,45,43,48,47,47                         │
└───────────────────────────┴─────────┴──────────────┴───────────┴───────────┴──────────┴───────────────────────────────────────────────────────────────────────────────┘
Running benchmark forms
  react-redux type-version: connect-5.1.1
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: connect-6.0.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: connect-7.1.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: useSelector-7.1.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: useSelector-rrr-4.2.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: useTrackedState-rrr-4.2.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)

Results for benchmark forms:
┌───────────────────────────┬─────────┬──────────────┬───────────┬───────────┬──────────┬─────────────────────────────────────────────────────────────────────────────────────┐
│ Type-Version              │ Avg FPS │ Render       │ Scripting │ Rendering │ Painting │ FPS Values                                                                          │
│                           │         │ (Mount, Avg) │           │           │          │                                                                                     │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ connect-5.1.1             │ 57.21   │ 962.3, 0.2   │ 6015.14   │ 1046.54   │ 2847.59  │ 56,57,58,57,58,57,58,57,58,57,58,56,57,59,58,56,58,57,55,56,58,55,55                │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ connect-6.0.0             │ 55.46   │ 944.8, 1.9   │ 11619.02  │ 861.48    │ 2261.33  │ 56,54,57,54,56,55,54,56,55,53,55,53,58,55,58,57,55,56,53,57,56,55,57,56,55,57,56,56 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ connect-7.1.0             │ 57.18   │ 942.4, 0.3   │ 6350.89   │ 937.68    │ 2566.82  │ 56,58,57,58,57,58,57,58,57,56,60,58,53,58,57,58,57,57                               │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ useSelector-7.1.0         │ 57.42   │ 971.6, 0.2   │ 5206.20   │ 1040.26   │ 2810.55  │ 56,57,58,57,58,57,60,57,58,57,58,57,58,56,59,58,57,58,58                            │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ useSelector-rrr-4.2.0     │ 57.53   │ 950.1, 0.4   │ 5243.96   │ 975.52    │ 2667.12  │ 56,57,58,57,58,57,58,57,58,60,58,56,58,57,58,57,58,57,58,58                         │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ useTrackedState-rrr-4.2.0 │ 57.50   │ 968.3, 0.6   │ 5976.38   │ 1100.85   │ 2845.86  │ 57,56,58,57,58,57,58,57,59,57,58,57,58,57,59,57,58,57,57                            │
└───────────────────────────┴─────────┴──────────────┴───────────┴───────────┴──────────┴─────────────────────────────────────────────────────────────────────────────────────┘
Running benchmark stockticker
  react-redux type-version: connect-5.1.1
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: connect-6.0.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: connect-7.1.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: useSelector-7.1.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: useSelector-rrr-4.2.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: useTrackedState-rrr-4.2.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)

Results for benchmark stockticker:
┌───────────────────────────┬─────────┬──────────────┬───────────┬───────────┬──────────┬─────────────────────────────────────────────────────────────────────────┐
│ Type-Version              │ Avg FPS │ Render       │ Scripting │ Rendering │ Painting │ FPS Values                                                              │
│                           │         │ (Mount, Avg) │           │           │          │                                                                         │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ connect-5.1.1             │ 59.20   │ 178.3, 0.4   │ 13861.48  │ 10625.63  │ 3613.06  │ 53,60,59,60,59,60,59,60,58,60,59,60,59,60,59,60,59,60,59,60,59,60,60    │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ connect-6.0.0             │ 21.41   │ 170.9, 5.1   │ 23188.04  │ 4479.60   │ 1334.57  │ 22,23,22,21,22,21,22,21,20,21,20,20                                     │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ connect-7.1.0             │ 55.11   │ 241.0, 0.3   │ 14093.91  │ 10291.27  │ 3461.91  │ 53,58,59,56,59,57,56,58,55,57,59,56,55,56,31,49,50,57,55,57,55,53,54,54 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ useSelector-7.1.0         │ 59.24   │ 153.1, 0.4   │ 10222.92  │ 12621.06  │ 4165.74  │ 57,59,60,59,60,59,60,59,60,59,60,59,60,59,60,59,59                      │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ useSelector-rrr-4.2.0     │ 59.23   │ 136.3, 1.7   │ 11838.46  │ 11729.19  │ 4013.76  │ 56,60,59,60,59,60,59,60,59,60,59,60,59,60,59,60,59,60,58,59,58,60,60    │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ useTrackedState-rrr-4.2.0 │ 55.56   │ 161.1, 2.5   │ 13776.99  │ 10417.79  │ 3605.89  │ 54,60,59,60,59,60,58,59,57,55,58,60,58,55,52,54,52,51,48,51,52,51,50,50 │
└───────────────────────────┴─────────┴──────────────┴───────────┴───────────┴──────────┴─────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view
  react-redux type-version: connect-5.1.1
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: connect-6.0.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: connect-7.1.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: useSelector-7.1.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: useSelector-rrr-4.2.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: useTrackedState-rrr-4.2.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)

Results for benchmark tree-view:
┌───────────────────────────┬─────────┬──────────────┬───────────┬───────────┬──────────┬─────────────────────────────────────────────────────────────────────────────────────┐
│ Type-Version              │ Avg FPS │ Render       │ Scripting │ Rendering │ Painting │ FPS Values                                                                          │
│                           │         │ (Mount, Avg) │           │           │          │                                                                                     │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ connect-5.1.1             │ 51.39   │ 501.5, 0.2   │ 7906.98   │ 8081.01   │ 595.82   │ 48,51,56,43,49,50,53,47,51,53,52,49,51,52,58,50,55,50,48,56,51,53,53                │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ connect-6.0.0             │ 40.85   │ 487.2, 17.2  │ 18761.17  │ 4396.43   │ 300.58   │ 44,39,41,43,45,34,39,41,39,40,39,40,43,44,46,38,43,42,35,45,43,40,45,40,36,40,42,42 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ connect-7.1.0             │ 52.08   │ 549.0, 0.2   │ 7831.28   │ 8387.32   │ 612.22   │ 52,53,54,47,48,52,49,54,47,56,53,50,52,48,56,52,53,55,51,52,56,54,53,51,51          │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ useSelector-7.1.0         │ 50.85   │ 415.0, 1.0   │ 6019.33   │ 8260.46   │ 639.90   │ 43,53,54,46,43,50,55,52,54,48,54,49,50,51,47,57,53,55,54,49,50,55,51,46,52,54,54    │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ useSelector-rrr-4.2.0     │ 50.50   │ 419.1, 2.6   │ 5668.93   │ 8703.02   │ 643.78   │ 45,51,46,42,52,47,54,48,50,53,50,45,51,49,57,55,53,50,53,55,47,44,50,53,53          │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ useTrackedState-rrr-4.2.0 │ 50.27   │ 475.2, 5.2   │ 7559.43   │ 8263.97   │ 612.24   │ 42,50,51,47,48,51,48,53,56,40,53,49,51,47,52,47,57,54,55,54,50,51,53,50,46,53,53    │
└───────────────────────────┴─────────┴──────────────┴───────────┴───────────┴──────────┴─────────────────────────────────────────────────────────────────────────────────────┘
Running benchmark twitter-lite
  react-redux type-version: connect-5.1.1
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: connect-6.0.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: connect-7.1.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: useSelector-7.1.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: useSelector-rrr-4.2.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)
  react-redux type-version: useTrackedState-rrr-4.2.0
    Checking max FPS... (30 seconds)
    Running trace...    (30 seconds)

Results for benchmark twitter-lite:
┌───────────────────────────┬─────────┬──────────────┬───────────┬───────────┬──────────┬──────────────────────────────────────────────────────────────────────────────────┐
│ Type-Version              │ Avg FPS │ Render       │ Scripting │ Rendering │ Painting │ FPS Values                                                                       │
│                           │         │ (Mount, Avg) │           │           │          │                                                                                  │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ connect-5.1.1             │ 50.55   │ 3.7, 0.5     │ 20439.70  │ 3665.49   │ 673.92   │ 60,59,60,59,60,59,58,57,59,58,55,52,47,40,39,35,36,31,32,32                      │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ connect-6.0.0             │ 29.86   │ 2.8, 5.1     │ 26799.24  │ 1429.80   │ 327.82   │ 59,60,59,53,47,41,36,32,30,27,26,23,22,20,19,20,18,17,18,16,18,16,15,15          │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ connect-7.1.0             │ 50.77   │ 3.8, 0.2     │ 19874.18  │ 3766.76   │ 688.27   │ 60,59,60,59,60,59,58,57,60,58,60,56,59,58,57,54,48,43,40,42,40,37,33,34,30,29,29 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ useSelector-7.1.0         │ 58.46   │ 3.1, 0.5     │ 14830.42  │ 5085.72   │ 877.47   │ 60,59,60,59,60,59,60,59,60,59,60,58,59,58,57,56,60,59,57,56,50,50                │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ useSelector-rrr-4.2.0     │ 58.02   │ 2.4, 2.5     │ 14641.09  │ 5089.34   │ 897.07   │ 59,60,59,60,59,60,59,60,59,60,59,60,59,56,58,54,57,58,59,56,57,54,52,52          │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ useTrackedState-rrr-4.2.0 │ 58.87   │ 2.9, 2.0     │ 13127.55  │ 5353.57   │ 935.13   │ 59,60,59,60,59,60,59,60,59,60,59,60,59,58,60,58,56,60,58,60,57,59,56,59,57,57    │
└───────────────────────────┴─────────┴──────────────┴───────────┴───────────┴──────────┴──────────────────────────────────────────────────────────────────────────────────┘
✨  Done in 2713.90s.

Benchmark name	Avg FPS
	RR 7.1.0 connect	RR 7.1.0 useSelector	RRR 4.2.0 useSelector	RRR 4.2.0 useTrackedState
deeptree	41.72	44.61	44.56	39.98
deeptree-nested	52.22	52.59	52.99	53.08
forms	57.18	57.42	57.53	57.50
stockticker	55.11	59.24	59.23	55.56
tree-view	52.08	50.85	50.50	50.27
twitter-lite	50.77	58.46	58.02	58.87

[dai-shi]

copying the result from dai-shi/react-tracked#1 (comment)

[theKashey]

Just wondering about a “classical” React-redux as a base line (and as a potential target for beautiful-react-redux)

[dai-shi]

I’ve once done it. #3 (comment)
Is this what you mean?