Calling a method vs using a function to call a method

Question

Suppose we have a method inside a class like this

class Blog extends Component {


  postClicked = (id) => {
    this.setState({selectedPostId: id})
  }

    render () {
      const newPosts = this.state.posts.map(el => {
        return <Post key={el.id}
         title={el.title}
         author={el.author}
         onClick={this.postClicked(el.id)}/>
      })

    return
    //something
{post}
  }
 }
}

Now, What is the difference between calling the handler like this

onClick={this.postClicked(el.id)} and onClick={() => this.postClicked(el.id)}

Would appreciate if someone can tell me the difference in general

manan5439 · Accepted Answer · 2018-06-16 18:12:23Z

2

after Ecmascript 6 javascript was introduced with is arrow function link

here ()==>{//code} is a similar as a function() or anonymous function

tell me if you find out what you want

answered Jun 16, 2018 at 18:12

manan5439

9589 silver badges27 bronze badges

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

Comments

twils0 · Accepted Answer · 2018-06-16 18:07:45Z

The first option, "this.postClicked(el.id)", will actually call the method, "this.postClicked", with the "el.id" argument, each time the component renders (probably not what's intended).

The second option, "() => this.postClicked(el.id)", will only call the method, "this.postClicked", with the "el.id" argument, when "Post" is clicked.

Overall, if you can find a way to put the "el.id" argument into an "id" or "name" prop on the component

<Post id={el.id} />

then you can do:

<Post
  id={el.id}
  onClick={this.postClicked}
/>

this.postClicked = (event) => {
  const { id } = event.target;
  ...
}

This last option avoids the use of an unnamed function. If you use an unnamed function, it will cause unnecessary re-renders. React cannot tell that an unnamed function is the same when it's checking whether or not it should re-render, by considering if the props of a component have changed. It considers the unnamed functions to be a new prop each time it checks, causing an unnecessary re-render each time.

Overall, it won't break your app, but it slows down performance slightly if you do it enough. It comes up especially if you start using React Motion (you'll really notice a difference there). It's best to avoid unnamed functions if possible.

nishant · Accepted Answer · 2018-06-16 17:58:37Z

1

you can read this blog it wil clear the things https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb

answered Jun 16, 2018 at 17:58

nishant

2,6161 gold badge16 silver badges20 bronze badges

Comments

Rohith Murali · Accepted Answer · 2018-06-16 18:15:31Z

1

Differences are,

First method is a wrong implementation and it wont give the intended result, where as second one will work.
In the first method you are making a function call, in second one you are assigning a function's signature to onClick. It is like the combination of below two statements.
```
var variableName = function(){//some content};  
onClick={variableName}
```

edited Jun 16, 2018 at 18:15

answered Jun 16, 2018 at 18:02

Rohith Murali

5,6692 gold badges27 silver badges28 bronze badges

Comments

topic · Accepted Answer · 2018-06-17 12:29:02Z

1

It looks like you question has already been answered. Just a side note though: remember that when assigning your method with an arrow function

onClick={ () => this.method() }

a new anonymous function is created on every re-render. So if the method doesn't need any arguments, it's better to reference the method directly (without parentheses so it's not invoked).

onClick={ this.method }

edited Jun 17, 2018 at 12:29

answered Jun 16, 2018 at 18:14

topic

3723 silver badges12 bronze badges

Comments

Yossi · Accepted Answer · 2018-06-16 17:55:49Z

0

The first will call the function every time render is done.

The second will do what you want - call it onClick.

answered Jun 16, 2018 at 17:55

Yossi

6,0877 gold badges50 silver badges83 bronze badges

Collectives™ on Stack Overflow

Calling a method vs using a function to call a method

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related