difference between passing {SomeFunction} and {SomeFunction()} in reactjs event handling

Question

import React from "react";

const FunctionClick = () => {
  const clickHandler = () => {
  console.log("Button clicked.");
  };

  return (
    <div>
      <button onClick={clickHandler}>Click</button>
    </div>
  );
};

export default FunctionClick;

{REACT NOOBIE ALERT} In the above code, I can see the difference in the output of

<button onClick={clickHandler}>Click</button>

and

<button onClick={clickHandler()}>Click</button>

but can someone explain why we are passing the function and not calling it?

How is the function (in second code) being called when the page loads even though we want to call it when the button is clicked.

Because you don't want to call the function when the page loads, you want to call the function when the event is fired. — Niet the Dark Absol
– Niet the Dark Absol, Commented Sep 27, 2020 at 8:41
Yes, thats what i am not understanding. How is the function being called when the page loads even though we want to call in when the button is clicked. — Supratik Chaudhuri
– Supratik Chaudhuri, Commented Sep 27, 2020 at 9:01
clickHandler is similar than () => {return clickHandler()}. But clickHandler() executes the function on every render — Rashomon
– Rashomon, Commented Sep 27, 2020 at 9:07
@supratik When page loads the javascript engine/interpreter sees '()' infront of funtion name and it directly executes. Just to keep in mind function name() { return func() } is not same as func() — mumair
– mumair, Commented Sep 27, 2020 at 10:09

Muhammad · Accepted Answer · 2020-09-27 10:04:42Z

1

Here you are passing the function(object) reference, which will not be called until you call it explicitly, since its in onClick and on click calls the function when click event occurs.

<button onClick={clickHandler}>Click</button>

Here you are passing the return value of the clickHandler, now it depends on you what value/object you return from clickHandler, since onClick in react expects a function reference to be called so you must return a function from clickHandler else it will throw a error.

<button onClick={clickHandler()}>Click</button>

answered Sep 27, 2020 at 10:04

Muhammad

7,4245 gold badges50 silver badges58 bronze badges

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

Comments

zahra zamani · Accepted Answer · 2020-09-27 09:59:18Z

When used with parentheses, that function is called every time the page is rendered But Without parentheses, it is called when clicked

 import React, { Component } from 'react';

class sample extends React.Component {
constructor(props) {
        super(props)


       this.clickHandler=this.clickHandler.bind(this);

}
 clickHandler() {
  console.log("Button clicked.");
  };
 render() {
  return (
    <div>
      <button onClick={this.clickHandler}>Click</button>
    </div>
  );
};
}
export default FunctionClick;

or

    <button onClick={() => this.clickHandler()}>
 Click
      </button>

for your code

import React from "react";


function FunctionClick () {

  function clickHandler () {
   console.log("Button clicked.");
  }
  return (
    <div>
      <button onClick={clickHandler}>Click</button>
    </div>
  );
};

export default FunctionClick;

Sarun UK · Accepted Answer · 2020-09-27 10:05:10Z

0

The mistake in your code is, not giving a function as onClick.

<button onClick={clickHandler()}>Click</button> - This is not correct, here we are executing the clickHandler function.

Instead do this way, (when explicitly want to pass arguments to the function)

<button onClick={(e) => {clickHandler(e)}}>Click</button>

answered Sep 27, 2020 at 10:05

Sarun UK

6,7667 gold badges26 silver badges52 bronze badges

Collectives™ on Stack Overflow

difference between passing {SomeFunction} and {SomeFunction()} in reactjs event handling

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related