You're not supposed to use anonymous functions in react attributes, e.g.

<a onClick=()=>doIt('myId')>Aaron</a>

I understand why this creates a performance problem for React's reconciliation because that anonymous function is recreated on every render pass and will thus always trigger a real DOM re-render of some kind. My question is, for a small ponent (i.e. not table where every row has a link) is this insignificant? I mean, React is smart enough just to replace the handler, not to re-render the DOM, right? so the cost is not that high?

You're not supposed to use anonymous functions in react attributes, e.g.

<a onClick=()=>doIt('myId')>Aaron</a>

I understand why this creates a performance problem for React's reconciliation because that anonymous function is recreated on every render pass and will thus always trigger a real DOM re-render of some kind. My question is, for a small ponent (i.e. not table where every row has a link) is this insignificant? I mean, React is smart enough just to replace the handler, not to re-render the DOM, right? so the cost is not that high?

• javascript
• reactjs
• anonymous-function

• doIt('myId')>Aaron is not precisely an anonymous functions – juanecabellob Commented Feb 16, 2017 at 17:47
• 2 Although the syntax is slightly wrong, there is indeed an anonoymous function for the onClick prop. It should look like this: <a onClick={()=>doIt('myId')}>Aaron</a> – ianks Commented Feb 16, 2017 at 20:01
• @CpnAhab, does my answer solve your question? – Kaloyan Kosev Commented Mar 9, 2017 at 7:48

3 Answers 3

I feel obliged to inform you that using an Anonymous function and Function.bind(this) in the render triggers a new render. This is because both

doIt.bind(this, 'myId') === doIt.bind(this, 'myId') // false

AND

() => doIt('myId') === () => doIt('myId') // false  

are FALSE!

If you want to bind something to a function, use partial application with a method in the React class.

class myComponent extends Component {

  doIt = (id) => () => {
    // Do Something
  }

  render() {
    <div>
      <a onClick={this.doIt('myId')}>Aaron</a>
    </div>
  }
}

For:

• small ponents: you are ok (almost no performance issues)
• large ponents: the deeper you get the more try to avoid it

In React documentation about event handling, you can find:

In most cases, this is fine. However, if this callback is passed as a prop to lower ponents, those ponents might do an extra re-rendering. We generally remend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.

Note: React is not handling callback props differently than other props. It always pares the old and new prop. Thus it re-renders when anonymous function is present because the anonymous function is always newly created.

Your JSX code sample should actually look like this:

<a onClick={ ()=>doIt('myId') }>Aaron</a>

Using an anonymous fat arrow function like this is perfectly valid. You are supposed to use anonymous functions in react attributes. That's okay.

Yes, it's not a best practice. If you want to solve the this context issue when using the ES6 class extends React.Component syntax I would advise you to bind the function in the class constructor.

No, for a 'small' ponent (i.e. not table where every row has a link) this is not a significant performance issue. You are safe.