Hey Adam, thanks for the reply, I take the point of the article (that you further clarified here).
My point of the "render should never be arrow-syntaxed" is: 1) it is highly unusual for React components' render methods to be invoked by anything but React's internal rendering cycle, so the danger of this context mismatch is 0 (except if you do call it directly).
2) JS prototype-attached methods allow devs to define a single method that is the same for, and can be used by any amount of instances, without being redefined (or bound). 3) Defining a class field as method = () => {} will transpile to code inited in the constructor, (this.method = function() {}), and not Comp.prototype.method = function () {}, leading this.method to be re-defined for every component instance.
So say you have 1000 instances of 1 component, that's 1000 function re-definitions where you could've had 1. You won't notice this perf enhancement unless you have a massive amount of component instances that define a massive amount of methods though.
Ahhh, OK. That does make sense. I hadn't thought of it in that context. But I suppose that, since every component has a render() method (in a class-based component), that could certainly be inefficient (although, as you've noted, it would only present itself in a very sizable app).
Thank you for taking the time to explain that to me!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hey Adam, thanks for the reply, I take the point of the article (that you further clarified here).
My point of the "render should never be arrow-syntaxed" is: 1) it is highly unusual for React components' render methods to be invoked by anything but React's internal rendering cycle, so the danger of
thiscontext mismatch is 0 (except if you do call it directly).2) JS prototype-attached methods allow devs to define a single method that is the same for, and can be used by any amount of instances, without being redefined (or bound). 3) Defining a class field as
method = () => {}will transpile to code inited in the constructor, (this.method = function() {}), and notComp.prototype.method = function () {}, leadingthis.methodto be re-defined for every component instance.So say you have 1000 instances of 1 component, that's 1000 function re-definitions where you could've had 1. You won't notice this perf enhancement unless you have a massive amount of component instances that define a massive amount of methods though.
Ahhh, OK. That does make sense. I hadn't thought of it in that context. But I suppose that, since every component has a
render()method (in a class-based component), that could certainly be inefficient (although, as you've noted, it would only present itself in a very sizable app).Thank you for taking the time to explain that to me!