search

dai-shi / reactive-react-redux

[NOT MAINTAINED] React Redux binding with React Hooks and Proxy
https://www.npmjs.com/package/reactive-react-redux
MIT License
503 stars 11 forks source link

Benchmarking state usage tracking and other related projects #32

Open dai-shi opened 5 years ago

dai-shi commented 5 years ago

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 commented 5 years ago

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.

2019-07-21 8 40 57 2019-07-21 8 41 03 2019-07-21 8 41 11
dai-shi commented 5 years ago

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 commented 5 years ago

copying the result from https://github.com/dai-shi/react-tracked/issues/1#issuecomment-519509857

2019-08-08 21 51 32
theKashey commented 5 years ago

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

dai-shi commented 5 years ago

I’ve once done it. https://github.com/dai-shi/reactive-react-redux/issues/3#issuecomment-495929564 Is this what you mean?