/react-dream-benchmark

Benchmark React Dream compositions against naive Recompose

Primary LanguageJavaScript

React Dream v Higher-order Component benchmark

Caveats

This comparison doesn’t mean React Dream is intrinsically faster than regular Recompose. The comparison is picking a scenario which is a common recompose one, but it’s only one of many use cases.

  • The usage of recompose here is assuming that the HoCs are not squashed. This would be possible with stateless HoCs! In that case, the diff would probably be naught
  • Stateful components will probably show no diff between the two approaches since they can’t be squashed into pure function composition, which is what is giving RD an edge here

500 HoCs on a single component is not realistic, but the intent is to reflect what would happen if a bunch of components, maybe about 50 of them, each with about 30 HoCs (something I’ve seen quite often) are rendered in a tree. It might be a good idea to benchmark that scenario instead, but the intention here was to simplify the scenario to make sure other factors are not playing a role.

Start

yarn global add serve

serve -s static/reactDreamApproach -p 4000
serve -s static/higherOrderComponentApproach -p 5000

Setup

  • Extremely simple HOC vs function in contramap
  • Composed 500 times
  • Run 100 times in an interval
  • Capture time difference between componentWillUpdate and componentDidUpdate in both cases

Super-duper early observations

Note: Not much data collected, and done only in Chrome in Mac OS X

  • Development environment: big difference, React Dream is easily 5x faster
  • Production environment: small difference, seems to be around 10 - 20 % faster

Example datasets from Mac OS X

I am aware the average is not the best thing to extract, but I’m short in time to do something else now :)

Production build, 6x slowdown on Chrome

React Dream

Average: 1.8767676771279762

[6.600000022444874,2.799999958369881,2.3999999975785613,2.199999988079071,5.799999984446913,1.400000008288771,1.9999999785795808,2.5000000023283064,1.1999999987892807,1.1999999987892807,1.6000000177882612,2.3999999975785613,0.9999999892897904,2.899999963119626,1.8999999738298357,2.299999992828816,0.9999999892897904,1.3000000035390258,2.0000000367872417,2.5000000023283064,1.39999995008111,3.000000026077032,1.400000008288771,1.500000013038516,1.3000000035390258,2.100000041536987,1.6000000177882612,1.8999999738298357,1.0999999940395355,2.199999988079071,2.3999999975785613,1.1999999987892807,2.5000000023283064,2.199999988079071,2.100000041536987,1.3000000035390258,1.400000008288771,1.3000000035390258,1.400000008288771,2.200000046286732,1.400000008288771,1.500000013038516,1.9999999785795808,1.500000013038516,1.3000000035390258,2.199999988079071,1.9999999785795808,2.300000051036477,2.3999999975785613,1.6000000177882612,0.49999996554106474,1.5999999595806003,1.500000013038516,1.2999999453313649,1.0999999940395355,2.200000046286732,1.9999999785795808,2.199999988079071,1.1999999987892807,1.7000000225380063,2.299999992828816,1.7999999690800905,1.400000008288771,2.200000046286732,2.099999983329326,1.400000008288771,1.0999999940395355,1.7000000225380063,2.0000000367872417,2.6000000070780516,2.200000046286732,1.3000000035390258,2.3999999975785613,1.6000000177882612,1.8000000272877514,1.3000000035390258,2.099999983329326,1.3000000035390258,1.4999999548308551,1.8999999738298357,1.3000000035390258,1.6000000177882612,2.199999988079071,1.8000000272877514,1.8999999738298357,2.199999988079071,2.099999983329326,1.9999999785795808,1.8000000272877514,1.1999999987892807,1.0999999940395355,1.4999999548308551,2.6000000070780516,0.9999999892897904,1.9999999785795808,1.3000000035390258,1.9000000320374966,2.0000000367872417,2.299999992828816]

Higher-order Component

Average: 3.1545454532735877

[18.1999999913387,10.399999970104545,10.700000042561442,9.400000039022416,22.90000003995374,15.899999998509884,4.099999961908907,3.800000005867332,4.400000034365803,3.3999999868683517,13.199999986682087,2.900000021327287,2.800000016577542,3.1999999773688614,2.3999999975785613,2.900000021327287,1.3000000035390258,2.799999958369881,2.099999983329326,3.0999999726191163,2.199999988079071,3.0999999726191163,1.8000000272877514,2.3999999975785613,2.6000000070780516,1.0999999940395355,2.0000000367872417,2.299999992828816,3.2000000355765224,2.5000000023283064,2.299999992828816,2.3999999975785613,2.299999992828816,2.199999988079071,2.3999999975785613,1.400000008288771,1.9999999785795808,5.800000042654574,1.8999999738298357,1.6999999643303454,1.9999999785795808,1.6999999643303454,1.8999999738298357,2.199999988079071,1.8000000272877514,2.299999992828816,2.199999988079071,1.400000008288771,1.500000013038516,2.6000000070780516,1.9999999785795808,2.199999988079071,2.299999992828816,1.8999999738298357,1.7999999690800905,1.7999999690800905,2.299999992828816,2.299999992828816,2.099999983329326,2.300000051036477,2.400000055786222,2.299999992828816,1.3000000035390258,1.9000000320374966,2.199999988079071,1.8999999738298357,1.9000000320374966,2.6000000070780516,2.299999992828816,2.3999999975785613,2.0000000367872417,1.6999999643303454,3.2999999821186066,1.3000000035390258,2.5000000023283064,2.6000000070780516,2.099999983329326,2.5000000023283064,2.299999992828816,2.5000000023283064,1.9999999785795808,2.299999992828816,2.099999983329326,1.7999999690800905,2.0000000367872417,2.5000000023283064,2.300000051036477,2.099999983329326,2.199999988079071,1.7000000225380063,2.7000000118277967,1.5999999595806003,2.099999983329326,1.4999999548308551,2.5000000023283064,2.7000000118277967,2.299999992828816,1.500000013038516,2.300000051036477]

Development build, no CPU slowdown

React Dream

Average: 0.5969696947505152

[1.7000000225380063,0.7999999797903001,0.8999999845400453,0.699999975040555,1.3000000035390258,0.5999999702908099,0.5999999702908099,0.7000000332482159,0.5000000237487257,0.5000000237487257,0.5000000237487257,0.5000000237487257,0.6000000284984708,0.5999999702908099,0.6000000284984708,0.5000000237487257,0.5999999702908099,0.5999999702908099,0.6000000284984708,0.5999999702908099,0.5000000237487257,0.5999999702908099,0.5000000237487257,0.6000000284984708,0.5999999702908099,0.49999996554106474,0.6000000284984708,0.5999999702908099,0.6000000284984708,0.6000000284984708,0.5999999702908099,0.49999996554106474,0.5999999702908099,0.49999996554106474,0.6000000284984708,0.5999999702908099,0.6000000284984708,0.49999996554106474,0.49999996554106474,0.699999975040555,0.6000000284984708,0.6000000284984708,0.6000000284984708,0.6000000284984708,0.49999996554106474,0.6000000284984708,0.5000000237487257,0.6000000284984708,0.5999999702908099,0.5999999702908099,0.699999975040555,0.5999999702908099,0.699999975040555,0.49999996554106474,0.49999996554106474,0.6000000284984708,0.6000000284984708,0.5999999702908099,0.5999999702908099,0.5000000237487257,0.5999999702908099,0.5999999702908099,0.5000000237487257,0.5999999702908099,0.5000000237487257,0.5000000237487257,0.6000000284984708,0.5999999702908099,0.6000000284984708,0.5000000237487257,0.5999999702908099,0.49999996554106474,0.6000000284984708,0.6000000284984708,0.6000000284984708,0.6000000284984708,0.49999996554106474,0.6000000284984708,0.49999996554106474,0.7999999797903001,0.5999999702908099,0.5000000237487257,0.5999999702908099,0.699999975040555,0.5999999702908099,0.5000000237487257,0.5000000237487257,0.49999996554106474,0.5999999702908099,0.6000000284984708,0.4000000189989805,0.6000000284984708,0.699999975040555,0.6000000284984708,0.49999996554106474,0.5000000237487257,0.5000000237487257,0.3999999607913196,0.5999999702908099]

Higher-order Component

Average: 4.868686868282355

[17.700000025797635,13.999999966472387,12.800000025890768,16.00000000325963,10.799999989103526,8.7000000057742,7.5999999535270035,5.100000009406358,5.499999970197678,5.200000014156103,5.000000004656613,4.799999995157123,4.6999999904073775,4.400000034365803,4.200000024866313,4.199999966658652,4.399999976158142,4.300000029616058,4.199999966658652,4.899999999906868,4.399999976158142,4.400000034365803,4.299999971408397,4.100000020116568,4.0000000153668225,5.200000014156103,4.399999976158142,5.300000018905848,4.599999985657632,4.300000029616058,3.9999999571591616,4.399999976158142,4.200000024866313,4.0000000153668225,4.100000020116568,4.099999961908907,4.100000020116568,4.100000020116568,4.200000024866313,4.0000000153668225,4.099999961908907,4.200000024866313,4.100000020116568,3.9999999571591616,4.0000000153668225,4.199999966658652,4.0000000153668225,3.9999999571591616,4.100000020116568,4.099999961908907,4.099999961908907,4.0000000153668225,4.200000024866313,4.100000020116568,4.200000024866313,4.100000020116568,4.299999971408397,4.299999971408397,4.300000029616058,4.100000020116568,4.300000029616058,4.0000000153668225,4.0000000153668225,4.899999999906868,4.799999995157123,4.199999966658652,4.099999961908907,4.499999980907887,4.199999966658652,4.200000024866313,3.9999999571591616,4.300000029616058,4.200000024866313,4.0000000153668225,4.399999976158142,4.300000029616058,3.8999999524094164,4.100000020116568,5.000000004656613,4.200000024866313,4.399999976158142,4.099999961908907,4.299999971408397,4.199999966658652,4.0000000153668225,4.100000020116568,4.200000024866313,4.200000024866313,4.300000029616058,4.0000000153668225,4.300000029616058,4.199999966658652,4.299999971408397,4.200000024866313,4.099999961908907,4.0000000153668225,4.099999961908907,4.100000020116568,4.100000020116568]