React bind method

Viewed 83

In React.js you better define your method binding in the constructor like this:

constructor(props){
  this.poo = this.poo.bind(this);
}

it's better for performance than binding in the render method.

So what about the arrow function

poo = () => {} 

Does it affect performance in the render method as well?

1 Answers

Yes it affects performance of render method. The arrow function gets fired every time the component is rendered (which happens multiple time during the lifetime of the application).

The worst thing happen if you pass arrow function by props to the child component. It receives a new prop on each update of parent component, which leads to inefficient rendering, especially if your child component is pure.

More of it you can find in this article by Cory House and in a great book by Michele Bertoli - React Design Patterns and Best Practices (Chapter 9, Improve the Performance of Your Applications).

Related