Why Using Arrow Functions or Bind in JSX Props is a No-No

When using React, it's important to avoid using arrow functions or binding in JSX props. This practice can lead to performance issues and incorrect behavior.

Performance Woes

Using arrow functions or binding within JSX props forces these functions to be recreated on each render. This means that:

• The old function is discarded, triggering garbage collection.
• Continuous rendering of many elements can result in performance jitters.
• Components relying on PureComponents or shouldComponentUpdate still trigger rerenders due to the changing arrow function prop.

Incorrect Behavior

Consider the following example:

onClick={() => this.handleDelete(tile)}

This code will create a new function on each render, causing React to mark the component as dirty and trigger a rerender. Even if the tile prop hasn't changed, the component will re-render because the arrow function is different.

Best Practices

To avoid these pitfalls, use the following best practices:

• Bind the event handler in the constructor:

constructor(props) {
  super(props);
  this.handleDelete = this.handleDelete.bind(this);
}

• Create an arrow function outside of the render method:

const handleDelete = tile => {
  // Handle delete logic
};

Additional Note:

It's important to note that arrow functions are perfectly fine when used in other parts of the component, such as within the render method. However, they should be avoided when assigning event handlers to JSX props.