Benchmarking with cocktails app by mikeyhogarth about reactive-react-redux

[dai-shi]

Setup

RR stands for react-redux. RRR stands for reactive-react-redux.

4 scenarios:

• connect: RR 7.0.3 connect HoC
• hooks: RR 7.1.0 useSelecter hook
• rrr1: RRR 4.0.0-beta.0 useSelector hook diff1.txt
• rrr2: RRR 4.0.0-beta.0 useTrackedState hook diff2.txt

Method

Use React Developer Tools Profiler in production build with webpack alias.

Before stating profiling: toggle "Only include drinks I can make from my bar" on to empty results
After starting profiling: Click the same toggle
Stop profiling after several seconds passed.

Finally, count the number of commits and sum up render duration. (I wonder if there's better way)

Results

connect: 14commits 0.8+0.7+0.2+0.1+0+0.1+16.1+0.1+100.2+13.1+0.1+0.1+0.1+0.6=132.3ms
hooks: 14commits 0.6+0.4+0.1+0.2+0+4.7+7.1+6+75+0.2+0.1+0+0+0.8=95.2ms
rrr1: 15commits 0.6+0.5+0.1+0.2+0.1+0+4.9+5.5+6+81.2+0.2+0+0.1+0+0.6=100.0ms
rrr2: 15commits 1+0.7+0.1+0.2+0.1+0+5.5+6.9+7.8+104.6+0.2+0.1+0.1+0.1+1.1=128.5ms

Now, I'm not sure if I'm doing anything wrong. This doesn't show any performance drop in connect vs hooks.

I swapped back/forth several times to make sure I wasn't imagining it and a quick check of the react devtools confirmed that many more re-renders were happening as a result of this change.

Maybe I'm missing to see how to count re-renders.
😕

[mikeyhogarth]

You can't see the animation janking? When I swap between branches it's really obvious that something's up with the hooks branch that isn't happening on the other one.

In terms of where I was counting, I was basically going into react devtools, doing a record, clicking/unclicking that filter, stopping recording and then checking the flame graph to see how many re-renders had occurred.
Pre change: 1 re-render for most components
post change: On some components it was upwards of 20
I am completely new to benchmarking react though (never had to worry about it before) so I may be using the tools incorrectly.

[dai-shi]

You can't see the animation janking?

I don't think I'm seeing obvious things.
Just did checkout upgrade-redux-use-hooks branch, npm install and npm start (DEV mode).

post change: On some components it was upwards of 20

Do you mean this Total renders becomes 20? Doesn't seem to happen in my browser...

so I may be using the tools incorrectly.

So may I.

[mikeyhogarth]

That is the right branch - but I'm not seeing the number of renders I was any more either! I think I might be going mad. I swear it was showing 20+ renders.

There is definitely a jank when toggling that filter switch on this branch that isn't there on master but I'm not sure where this would be coming from - doesn't appear to be measurable in renders bizarrely which makes me wonder if it's actually some kind of blocking calculation rather than renders.

[dai-shi]

Well, I actually wanted to see the issue for comparison, but it's good that there's no performance issue in react-redux hooks.

Thanks anyway. Please let me know if you find a way to reproduce it.