Invoking functions with "this" keyword in ReactJS

Question

Below is a snippet of code from codecademy. I'm new to Javascript and React so I just want to ask why parentheses isn't needed after this.myFunc. I thought invoking a function in Javascript requires parentheses. Is this React specific, or am I missing something here?

Thanks!

class MyClass extends React.Component {
  myFunc() {
    alert('Stop it.  Stop hovering.');
  }
  render() {
    return (
      <div onHover={this.myFunc}>
      </div>
    );
  }
}

Invoking the function does require parentheses, but you don't want the function to execute until a hover event happens. — takendarkk, Dec 28 '18 at 17:48
Possible duplicate of [Difference between (function(){})(); and function(){}();](https://stackoverflow.com/questions/423228/difference-between-function-and-function) — Bharath Kumar S, Dec 28 '18 at 17:53
this sums it up pretty nicely... https://stackoverflow.com/questions/20485425/why-in-javascript-event-handler-functions-with-parentheses — Noman Hassan, Dec 28 '18 at 17:57

AndrewL64 · Answer 1 · 2018-12-28T18:02:11.703

1

If a function is written with parentheses, it will be called on render whereas a function without parentheses is simply a reference to that function and will not self-invoke but wait for the hover event to happen.

<div onHover={this.myFunc()}> // Calls the myFunc function and invokes it on render

<div onHover={this.myFunc}> // References the myFunc function and invokes it on hover

edited Dec 28 '18 at 18:02

answered Dec 28 '18 at 17:50

AndrewL64

15,794
8
47
79

score 0 · Answer 2 · answered Dec 28 '18 at 17:50

React will handle calling that function for you when the user hovers. In this case if you change it to <div onHover={this.myFunc()}> The function will be run on render, and if that function returns a function, the function that gets returned will be run on hover. Which is not what you want.

This can be a useful feature of JavaScript to give another section of code a function to run later.

For example:

setTimeout(myFunc, 1000);

function myFunc() {
    console.log("1 second has passed");
}

I don't want myFunc to be run instantly. Only after the timeout has completed. So I let the setTimeout call it for me.

score 0 · Answer 3 · answered Dec 28 '18 at 17:51

0

When you invoke function you will set onHover to return value of that function which is undefined in this case because your function returns nothing. You want to bind onHover event to function itself not it's return value.

answered Dec 28 '18 at 17:51

Akın Tekeoğlu

161
2
11

Invoking functions with "this" keyword in ReactJS

3 Answers3