Why to pass function reference instead of method in onClick event of button in ReactJS?

Question

Whenever I pass function parentheses in onClick of button, it automatically calls when page loads even without clicking on button. But when I don't pass function parentheses in onClick of button, it calls only when button is clicked.

With passing parentheses in function call

<button onClick={this.handleButtonClick()}>Increment</button>

Without passing parentheses in function call

<button onClick={this.handleButtonClick}>Increment</button>

Why function called automatically on page load whenever I pass parentheses to function even-though it is written inside onClick of button ?

you can still do method if you bind it (you can easily achieve it now using arrow binding): onClick={() => this.handleButtonClick()}, then it will not calls automatically when page loads — Jee Mok
– Jee Mok, Commented Jul 24, 2019 at 9:06

Ante Gulin · Accepted Answer · 2019-07-24 09:14:24Z

6

There's a difference between a function call and a function.

When a component renders, all statements are executed and expressions are evaluated. It's plain javascript, that's how javascript works.

this.handleButtonClick() is a function call, and therefore the function will be called once the component renders. I assume that handleButtonClick() returns undefined which will cause the button to render as <Button onClick={undefined} />. Now, if onClick is undefined, nothing will happen when the click actually happens as there is no function to be called.

this.handleButtonClick is just a reference to a function, it doesn't invoke it. You need to pass the function reference to onClick prop so that it can be called later by React, once the click actually happens.

answered Jul 24, 2019 at 9:14

Ante Gulin

2,0203 gold badges15 silver badges16 bronze badges

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

Comments

devserkan · Accepted Answer · 2019-07-24 09:14:55Z

1

It automatically calls because you are invoking it immediately by:

this.handleButtonClick()

"onClick" does not work like that, if you want to manually invoke the function you can use:

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

This is done automatically if you use function reference. Hence, you don't need to invoke it or use a callback function. Actually, using function reference is better since that function isn't recreated in every render.

answered Jul 24, 2019 at 9:14

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

4 Comments

Ante Gulin Over a year ago

Using function reference instead of an inline arrow function is better*. Furthermore, In functional components you should use useCallback to prevent the function reference from changing. In class components, functions should be methods of a class, like the OP has already done.

devserkan Over a year ago

@AnteGulin, well, yes. I tried to explain it in my last paragraph with the reason (recreated in every render) :) "...you should use useCallback" Maybe not always? :) kentcdodds.com/blog/usememo-and-usecallback

Ante Gulin Over a year ago

You can still have a reference to a function that is created in the render method, it's still a reference, but the one that will change in every render too, hence why I commented to clarify further.

devserkan Over a year ago

Oh, totally misunderstood. Yes, you are right about that. Using reference doesn't matter in functional components. Since OP uses this I explained it as they use class components and thought that you are giving extra information about functional components by saying "should use useCallback" as a general manner.

M Talha Jabbar · Accepted Answer · 2021-08-28 08:43:05Z

0

There is a difference between function reference and function invoking.

When you set the dynamic value like: this.handleButtonClick() that means you're invoking the function as soon as the component renders to the page.

But when you just pass the reference of the function like this.handleButtonClick that means React will call this function only when the user clicks on it.

answered Aug 28, 2021 at 8:43

M Talha Jabbar

112 bronze badges

Comments

Divyansh Sikarwar · Accepted Answer · 2021-09-10 11:08:40Z

0

JS will execute the function On each Render when you do OnClick(Func(params))

because you are calling a function instead of passing it.

Do this instead :

OnClick ( ()=> {Func(params) } )

edited Sep 10, 2021 at 11:08

answered Sep 9, 2021 at 10:05

Divyansh Sikarwar

114 bronze badges

1 Comment

Suraj Rao Over a year ago

I think you missed }. Can you check your syntax?

navinrangar · Accepted Answer · 2022-10-20 12:16:58Z

0

In react functional components, if we pass any function to onclick this way.. onClick={func()} this func will be called right away when the page is loaded, that for sure we don't want.

So we have two ways to make it work right.

one, pass it as a reference like this- onClick={()=> func()} (this means only pass reference to that function when page loads, but call that func() if component is clicked over.)

second, just pass the name of the function- onClick={func} (this means both pass reference and call on Call).

these both things work the same way. second one is more easy however the former one is used the most.

answered Oct 20, 2022 at 12:16

navinrangar

1,49416 silver badges27 bronze badges

Collectives™ on Stack Overflow

Why to pass function reference instead of method in onClick event of button in ReactJS?

5 Answers 5

Comments

4 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related