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.
yarn global add serve
serve -s static/reactDreamApproach -p 4000
serve -s static/higherOrderComponentApproach -p 5000
- Extremely simple HOC vs function in contramap
- Composed 500 times
- Run 100 times in an interval
- Capture time difference between
componentWillUpdate
andcomponentDidUpdate
in both cases
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
I am aware the average is not the best thing to extract, but I’m short in time to do something else now :)
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]
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]
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]
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]