Avoid Arrow Functions and Bind in JSX Props for Optimal Performance

React's lint tool aims to enhance code practices by highlighting potential issues. One common error message is "JSX props should not use arrow functions." This points out the detrimental effects of using arrow functions or bind within JSX props.

Why Arrow Functions and Bind Hinder Performance

Incorporating arrow functions or bind into JSX props has performance implications:

• Garbage Collection: Each time an arrow function is created, the previous one is discarded. If multiple elements are rendered with inline functions, it can lead to choppy animations.
• Rerendering: Inline arrow functions interfere with the shallow comparison mechanisms used by PureComponents and components employing the shouldComponentUpdate method. As the arrow function prop is recreated each time, it's detected as a prop change, triggering an unnecessary rerender.

Impact of Inline Handlers on Rerendering

Consider these examples:

Example 1: PureComponent without Inline Handler

class Button extends React.PureComponent {
  render() {
    const { onClick } = this.props;
    console.log('render button');
    return Click;
  }
}

In this code, the Button component only rerenders when its props change, as expected for a PureComponent.

Example 2: PureComponent with Inline Handler

const Button = (props) => {
  console.log('render button');
  return  props.onClick()}>Click;
};

Due to the inline arrow function, Button now rerenders every time, even though the component state remains unchanged. This unnecessary rerendering can significantly impact performance.

Best Practices

To avoid these performance issues, it's recommended to adhere to the following best practices:

• Define your event handlers outside of JSX: Extract arrow functions or bind methods into separate variable declarations.
• Use this binding: For class components, bind event handlers to this in the constructor.
• Utilize higher-order functions: Consider using higher-order functions like map or bindActionCreators for more efficient event handling in JSX.