When using ESLint React plugin, you may find a rule called jsx-no-bind
. It prevents you from using .bind
or arrow function in a JSX prop. For instance, ESLint will complain about the arrow function in the onClick
prop.
1 | class ListArrow extends React.Component { |
There’re two reasons why this rule is introduced. First, a new function will be created on every render
call, which may increase the frequency of garbage collection. Second, it will disable the pure rendering process, i.e. when you’re using a PureComponent
, or implement the shouldComponentUpdate
method by yourself with identity comparison, a new function object in the props will cause unnecessary re-render of the component.
But some people argue that these two reasons are not solid enough to enforce this rule on all projects, especially when the solutions will introduce more codes and decrease readability. In Airbnb ESLint preset, the team only bans the usage of .bind
, but allows arrow function in both props and refs. I did some googling, and was convinced that this rule is not quite necessary. Someone says it’s premature optimization, and you should measure before you optimize. I agree with that. In the following sections, I will illustrate how arrow function would affect the pure component, what solutions we can use, and talk a little bit about React rendering internals.