Optimization of arrow functions in react

Question

Apart from needing to create a new function each time render is invoked, are there any other differences from using:

class {
   on = () => true
   render = () => <z on={this.on} />
}

vs

class {
   render = () => <z on={() => true} />
}

For example, are there any optimizations that browsers make? Are there any implementation differences?

If there are zero differences, would it make sense for something like bable to transform the code to avoid creating the function in the render function?

{} => true si not valid. And what is the purpose of having a function that always returns true ? — klugjo
– klugjo, Commented Apr 25, 2018 at 9:21
As always: yes the second might be faster if optimizations in js would be logical. And even then: Why do you care? Are you having performance problems? If so, its definetly not the arrow func — Jonas Wilms
– Jonas Wilms, Commented Apr 25, 2018 at 9:23
@klugjo thanks have corrected, purpose is not what’s in the function, rather how the function is defined. — FabianCook
– FabianCook, Commented Apr 25, 2018 at 9:24
AFAIK, render = () => {} won't work, will it? Like a half year ago I tried it and it generated an error in babel — Limbo
– Limbo, Commented Apr 25, 2018 at 9:26

Anu · Accepted Answer · 2018-04-25 09:40:28Z

1

From Reactjs point of view, since the arrow function creates a new function everytime, it could potentially cause two performance related problems:

Could invoke the garbage collector more frequently than usual
Will cause unnecessary re-render of your components(even the pure components) as new function will be considered as a new prop.

There is already a babel plugin that solves this re-render problem caused by using arrow fn: reflective-bind The performance benefit from using this plugin has been described here

edited Apr 25, 2018 at 9:40

answered Apr 25, 2018 at 9:30

Anu

1,0798 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

FabianCook Over a year ago

I didn’t even think of that point, wouldn’t it cause large performance issues if this is happening?

Anu Over a year ago

Well that depends on many factors like how many arrow fn you are passing as props, how many levels of component nesting to which these arrow fns are passed as props etc

Anu Over a year ago

@FabianCook Do let me know if you have any more questions. If the answer helped you, please accept it so that it will help others in the future.

Collectives™ on Stack Overflow

Optimization of arrow functions in react

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related