CODEWITHSUNDEEP
javascriptreactjsbabeljs
FabianCook
FabianCook

Reputation: 20557

Optimization of arrow functions in react

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?

Upvotes: 0

Views: 200

Answers (1)

Anu
Anu

Reputation: 1079

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

Upvotes: 1

Related Questions