3

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 Answer 1

2

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).

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

1 Comment

You can put references to back up what you are saying?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.