about 1 year ago

I was learning eslint's react/jsx options and stumbled upon this rule react/jsx-no-bind:

A bind call or arrow function in a JSX prop will create a brand new function on every single render. This is bad for performance, as it will result in the garbage collector being invoked way more than is necessary.

The following patterns are considered warnings:

<div onClick={this._handleClick.bind(this)}></div>

<div onClick={() => console.log('Hello!'))}></div>

The following patterns are not considered warnings:

<div onClick={this._handleClick}></div>
← React ES6 class constructor super() Linting React Babel projects →
comments powered by Disqus