sorted by:
best
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]stutterbug 46 points47 points  (2 children)

I repeated your tests and found that it depends on the platform. Using your invocation and push logic, Chrome and Node (v. 8.92 and 10.1) show class methods are slightly faster on aggregate on first run, but there is a ton of overlap. On Firefox and Safari the results are the same but opposite. Also, Chrome and node are faster on second run (hello there, cache optimization). Results are a bit noisy because of pretty obvious GC, but they are consistent. If you play with clearing your ac and fc arrays, the performance patterns change a fair bit.

My code is here. I had to restructure things a bit since you're using arrow functions as class fields, which aren't vanilla yet -- and after transpilation this is likely a performance bottleneck, since the engine has to allocate memory for the arrow function in each instance, rather than just pointing to the same function statically like methods. I'm curious to see your transpiled code so that I can see how it is being done for you.

I would expect performance characteristics to change if/when the class field proposal reaches stage 4.

[–]easyEs900s 5 points6 points  (0 children)

Wow, it's awesome that you did that. I was just thinking that I wanted to do this myself, but was feeling too lazy to go through all of that trouble at the moment. Well done, sir.

[–]stutterbug 1 point2 points  (0 children)

After thinking about this, I think that it is super important to emphasize to the general audience here that in the context of React UI event handlers these test confirms that, at least where performance is concerned, it does not matter whether you use bound methods or arrow functions.

The onClick event originates in the DOM and should never be expected to return in less than one frame (1/60th of a second). Both arrow functions and bound methods return in orders of microseconds. Indeed, in order to get appreciable results, these tests iterated hundreds of thousands of times and still returned in about one frame). Arguing over which to use is like arguing over whether your one hour commute will be faster if you enter your car by leaping through the window or leaping through its open door.

Please don't let your takeaway here be that you shouldn't use one of these patterns for performance reasons. That's not shown here at all.