Why shouldn't JSX props use arrow functions or bind?

Question

I'm running lint with my React app, and I receive this error:

error    JSX props should not use arrow functions        react/jsx-no-bind

And this is where I'm running the arrow function (inside onClick):

{this.state.photos.map(tile => (
  <span key={tile.img}>
    <Checkbox
      defaultChecked={tile.checked}
      onCheck={() => this.selectPicture(tile)}
      style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}}
    />
    <GridTile
      title={tile.title}
      subtitle={<span>by <b>{tile.author}</b></span>}
      actionIcon={<IconButton onClick={() => this.handleDelete(tile)}><Delete color="white"/></IconButton>}
    >
      <img onClick={() => this.handleOpen(tile.img)} src={tile.img} style={{cursor: 'pointer'}}/>
    </GridTile>
  </span>
))}

Is this a bad practice that should be avoided? And what's the best way to do it?

Answer 1

This is because an arrow function apparently will create a new instance of the function on each render if used in a JSX property. This might create a huge strain on the garbage collector and will also hinder the browser from optimizing any "hot paths" since functions will be thrown away instead of reused.

You can see the whole explanation and some more info at https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

Answer 2

Why shouldn't JSX props use arrow functions or bind?

Mostly, because inline functions can break memoization of optimized components:

Traditionally, performance concerns around inline functions in React have been related to how passing new callbacks on each render breaks shouldComponentUpdate optimizations in child components. (docs)

It is less about additional function creation cost:

Performance issues with Function.prototype.bind got fixed here and arrow functions are either a native thing or are transpiled by babel to plain functions; in both cases we can assume it’s not slow. (React Training)

I believe people claiming function creation is expensive have always been misinformed (React team never said this). (Tweet)

When is the react/jsx-no-bind rule useful?

You want to ensure, that memoized components work as intended:

• React.memo (for function components)
• PureComponent or custom shouldComponentUpdate (for class components)

By obeying to this rule, stable function object references are passed. So above components can optimize performance by preventing re-renders, when previous props have not changed.

How to solve the ESLint error?

Classes: Define the handler as method, or class property for this binding.
Hooks: Use useCallback.

Middleground

In many cases, inline functions are very convenient to use and absolutely fine in terms of performance requirements. Unfortunately, this rule cannot be limited to only memoized component types. If you still want to use it across-the-board, you could e.g. disable it for simple DOM nodes:

rules: {
  "react/jsx-no-bind": [ "error", { "ignoreDOMComponents": true } ],
}

const Comp = () => <span onClick={() => console.log("Hello!")} />; // no warning

Answer 3

Using inline functions like this is perfectly fine. The linting rule is outdated.

This rule is from a time when arrow functions were not as common and people used .bind(this), which used to be slow. The performance issue has been fixed in Chrome 49.

Do pay attention that you do not pass inline functions as props to a child component.

Ryan Florence, the author of React Router, has written a great piece about this:

https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578

Answer 4

To avoid creating new functions with the same arguments, you could memoize the function bind result, here is a simple utility named memobind to do it: https://github.com/supnate/memobind

Answer 5

You can use arrow functions using react-cached-handler library, no need to be worried about re-rendering performance :

Note : Internally it caches your arrow functions by the specified key, no need to be worried about re-rendering!

render() {
    return (
        <div>
            {this.props.photos.map((photo) => (
                <Photo
                    key={photo.url}
                    onClick={this.handler(photo.url, (url) => {
                        console.log(url);
                    })}
                />
            ))}
        </div>
    );
}

Other features:

• Named handlers
• Handle events by arrow functions
• Access to the key, custom arguments and the original event
• Component rendering performace
• Custom context for handlers

Answer 6

You may also see this this error if the function you are using in your onClick handler is a regular (non-inline) function defined outside of the render method but using the function keyword.

Declare your handler function as an arrow function using const, outside of you render method, and React will stop complaining...