CODEWITHSUNDEEP
javascriptreactjsdom-events
Mayur
Mayur

Reputation: 160

How does react handle functions/callbacks passed to event handlers?

I looked for different blogs / documentation about this particular problem, I understand how a method needs to be bind before it can be used in the render function, however there were a few things the documentations fail to explain in detail, different ways a function can be passed into a event handler are:

// call a already bound funciton
<button onClick={this.sayHello}>
  Click me!
</button>

// bind in place 
<button onClick={this.sayHello.bind(this)}>
  Click me!
</button>

// use es6 arrow functions
<button onClick={() => alert('hello'))}>
  Click me!
</button>

the react documentation says that the recommended way is to bind a function or the function will be called for every render of the component and can potentially mess with things.

however I couldn't find why would it be called for every render.

But would it not be called only when its clicked ?

or

How does onClick handle or execute functions passed under the food ?

Upvotes: 0

Views: 435

Answers (2)

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8118

React makes use of Synthetic events. In case you are using a class based component you need to bind you function scope to the class (only when we do not use arrow functions in our class), otherwise the scope of this keyword is lost in that function. Which means if a normal ES5 function is used as handler and we use this.setState() within it, it would not work as expected.

If you use arrow function in your class as handler function, then no need to bind it to the scope of the class as the scope of the arrow function is one execution context above it.

In case you are using a functional Component. There is no this keyword available and you directly call a function ( a handler outside or inside the function itself)

Now: let me explain Syntax's:

Syntax-1:

   // call a already bound funciton
       <button onClick={this.sayHello}>
         Click me!
        </button>

You will simply have an event Handler by the name sayHello (something like below) in your class Component .

sayHello(){ ... }   // Binded in constructor by doing this.sayHello = this.sayHello.bind(this)

Or

sayHello = ()=>{}

And the handler would be called/invoked when the button get's clicked.

Syntax-2:

// bind in place 
<button onClick={this.sayHello.bind(this)}>
  Click me!
</button>

This syntax is simple another way to bind the syntax of this keyword in our handler function sayHello for the same reasons that I mentioned in above.

Syntax-3:

// use es6 arrow functions 
<button onClick={() => sayHello('hello'))}>
  Click me!
</button>

Whenever we want to pass argument to the handler function, we use this syntax. So, in this case when the button is clicked, our sayHello function gets a value "hello" as the argument.

You Last Doubt: When React Documentation says the function will be called for every render of the component and can potentially mess with things. They mean if your use event handler wrongly just within the element using ()=>{} syntax and also use a this.setState() within it, It will force a re-render. Because that's what setState() does, re-renders our component. And when it reaches the same line of code, it will again re-render and this will ultimately break our app.

Upvotes: 1

buzatto
buzatto

Reputation: 10382

difference is, when you declare a function while passing to a certain property like cases #2 & #3, everytime the component is updated the component will recreate that same function again.

On the other hand when you declare it before and pass it like case #1, on component updates the property will preserve the function reference and will not recreate the function.

given that case #1 you have only one function created and case #2 & #3 the function will be recreated on each update.

Upvotes: 1

Related Questions