React JS binding callbacks

Question

How can we practically prove the point, After Every render react creates new callback arrow function so it is a bad approach. See below code -

class DankButton extends React.Component {
  render() {
    // Bad Solution: An arrow function!
    return <button onClick={() => this.handleClick()}>Click me!</button>
  }

  handleClick() {
    this.logPhrase()
  }

  logPhrase() {
    console.log('such gnawledge')
  }
}

Also, how the below Arrow function class property function really works ?

class DankButton extends React.Component {
  render() {
    return <button onClick={this.handleClick}>Click me!</button>
  }

  //  ES6 class property-arrow function! 
  handleClick = () => {
    this.logPhrase();
  }

  logPhrase() {
    console.log('such gnawledge')
  }
}

Sagiv b.g · Accepted Answer · 2017-09-25 18:14:22Z

1

I'm not sure i understand what you mean exactly by

How can we practically prove the point

As i understand from your question, i assume that you do realize that in the first example above, a new instance of a function is being created.
With that in mind, when you think about it, there are at least 2 issues when you create and pass a new instance of an object or function:

Maybe less important in most cases, you consume more memory on each render.
More important (in my opinion) you can potentially interrupt the Reconciliation and Diffing Algorithm of react by passing a new prop on each render, this will cause a re-render of the child component, hence performance issues can arise.

edited Sep 25, 2017 at 18:14

answered Sep 25, 2017 at 18:01

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Shubham Over a year ago

how to check of new instance is actually created.?

Brr Switch Over a year ago

I'm sorry, I don't follow this right. Which one is efficient? The first or the second approach ?

Shubham Over a year ago

@vamshi 1st approach is bad and its answer is it creates the new callback instance every time. But how to check if it creates the new instance every render or not?

Sagiv b.g Over a year ago

@VamshiGudipati i've updated my answer (the first example is considered a bad practice)

Sagiv b.g Over a year ago

@Shubham what do you mean by "how to check if it creates the new instance every render or not?" You are passing a new anonymous (arrow) function on each render, of course it is a new instance. you can't re-use it or call it again when it's anonymous.

Andrew · Accepted Answer · 2017-09-26 03:35:48Z

0

Arrow function class property function really works.

Sorry, Don't know how to prove the new instances of function when using bind, but I can do the latter.

console.log this in your arrow function, and compare it to one that is done as a regular function. Do not use bind at any point. The arrow function's this will be the component's context, while the function based one will be either window or undefined.

answered Sep 26, 2017 at 3:35

Andrew

7,5855 gold badges28 silver badges35 bronze badges

Collectives™ on Stack Overflow

React JS binding callbacks

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related