Handling Events in React with Arrow Functions as variable or function?

Question

I am learning React an encountered two different ways of writing event handling functions and do not know if they are somehow semantical identically or if it is just different sytax?

This seems more intuitive for me:

clickHandler = () => {
  this.setState({
    random: Math.random(),
  });
};

But in the book I am using they always do something like this:

clickHandler2() {
  return () => {
    this.setState({
      random: Math.random(),
    });
  };
}

I created a CodePen and all the behavior seems the same, especially this binding. Is it just different syntax for the complete same behavior?

Yes, it's just a different syntax. I prefer the first option because of reading reasons. — shai_sharakanski
– shai_sharakanski, Commented Nov 12, 2020 at 10:35

Mario Petrovic · Accepted Answer · 2020-11-12 10:53:22Z

In some way it is different syntax, but second example where you return function back after executing clickHandler2() that is something called Curry function and you can see more about that here in this article.

Main benefit for clickHandler2() approach is that you can parametrize return function that will be executed when onClick occurs. This is good when you are looping through items and you need to pass some data (ex. id) if that code depends on any data.

clickHandler2(id) {
  return () => {
     doSomething(id);
  };
}

userIds.map((id) => <button onClick={this.clickHandler2(id)}>Click2</button>);

This is usually a case in lists. Other way for this to happen without using Curry function is to do this:

clickHandler = (id) => {
  dosomething(id);
};

userIds.map((id) => (
  <button
    onClick={() => {
      this.clickHandler(id);
    }}
  >
    Click2
  </button>
));

Collectives™ on Stack Overflow

Handling Events in React with Arrow Functions as variable or function?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related