Using bind on a function or declaring a function in the render method of a component or the body of a functional component, and then passing that function as a prop will mean that the brand new function that is created on every single render will be considered a completely different function. This can affect performance in some situations, as it may cause unnecessary re-renders if a brand new function is passed as a prop to a component that uses reference equality check on the prop to determine if it should update, such as a component wrapped with memo, or if the prop is used in any hook's "dependency array".
Note that this behavior is different for ref props, which is a special case in React that does not cause re-renders when a brand new function is passed. See ignore-refs below for more information.
Examples of incorrect code for this rule:
<Foo onClick={this._handleClick.bind(this)}></Foo><Foo onClick={() => console.log('Hello!')}></Foo>function onClick() { console.log('Hello!'); }
<Foo onClick={onClick} />Examples of correct code for this rule:
<Foo onClick={this._handleClick}></Foo>"react/jsx-no-bind": [<enabled>, {
"ignoreDOMComponents": <boolean> || false,
"ignoreRefs": <boolean> || false,
"allowArrowFunctions": <boolean> || false,
"allowFunctions": <boolean> || false,
"allowBind": <boolean> || false
}]Examples of correct code for this rule, when ignoreDOMComponents is true:
<div onClick={this._handleClick.bind(this) />
<span onClick={() => console.log("Hello!")} />
<button type="button" onClick={function() { alert("1337") }} />Refs are a special-case that do not behave like other props. Sending a new function in on ever render will not cause re-renders like it could with any other prop.
However, there is a caveat with callback refs:
If the ref callback is defined as an inline function, it will get called twice during updates, first with null and then again with the DOM element. This is because a new instance of the function is created with each render, so React needs to clear the old ref and set up the new one. You can avoid this by defining the ref callback as a bound method on the class, but note that it shouldn’t matter in most cases.
You can also avoid this behavior using createRef or useRef (or useCallback if you have custom logic).
If you are using a simple setter (as shown below) then you may not need this rule to fire for refs, and can disable it specifically for refs with ignoreRefs.
Examples of correct code for this rule, when ignoreRefs is true:
<Foo ref={ref => { this._div = ref; }} />
<Foo ref={this._refCallback.bind(this)} />Examples of correct code for this rule, when allowArrowFunctions is true:
<Foo onClick={() => alert("1337")} />Examples of correct code for this rule, when allowFunctions is true:
<Foo onClick={function () { alert("1337") }} />function onClick() { alert("1337"); }
<Foo onClick={onClick} />Examples of correct code for this rule, when allowBind is true:
<Foo onClick={this._handleClick.bind(this)} />A common use case of bind in render is when rendering a list, to have a separate callback per list item:
var List = createReactClass({
render() {
return (
<ul>
{this.props.items.map(item =>
<li key={item.id} onClick={this.props.onItemClick.bind(null, item.id)}>
...
</li>
)}
</ul>
);
}
});Rather than doing it this way, pull the repeated section into its own component:
var List = createReactClass({
render() {
return (
<ul>
{this.props.items.map(item =>
<ListItem key={item.id} item={item} onItemClick={this.props.onItemClick} />
)}
</ul>
);
}
});
var ListItem = createReactClass({
render() {
return (
<li onClick={this._onClick}>
...
</li>
);
},
_onClick() {
this.props.onItemClick(this.props.item.id);
}
});This will speed up rendering, as it avoids the need to create new functions (through bind calls) on every render.
Unfortunately React ES6 classes do not autobind their methods like components created with the older createReactClass syntax. There are several approaches to binding methods for ES6 classes. A basic approach is to just manually bind the methods in the constructor:
class Foo extends React.Component {
constructor(...args) {
super(...args);
this._onClick = this._onClick.bind(this);
}
render() {
return (
<div onClick={this._onClick}>
Hello!
</div>
);
}
_onClick() {
// Do whatever you like, referencing "this" as appropriate
}
}A more sophisticated approach would be to use something like an autobind ES7 decorator or property initializers.
Functional components are often used alongside hooks, and the most trivial case would occur if your callback is completely independent from your state. In this case, the solution is as simple as moving the callback out of your component:
const onClick = () => {
console.log("Independent callback");
};
const Button = () => {
return (
<button type="button" onClick={onClick}>Label</button>
);
};Otherwise, the idiomatic way to avoid redefining callbacks on every render would be to memoize them using the useCallback hook:
const Button = () => {
const [text, setText] = useState("Before click");
const onClick = useCallback(() => {
setText("After click");
}, [setText]); // Array of dependencies for which the memoization should update
return (
<button type="button" onClick={onClick}>{text}</button>
);
};If you do not use JSX or do not want to enforce that bind, functions declared in the render method of a component, or functions declared in the body of a functional component are not used in props, then you can disable this rule.