Difference between using Arrow function or function for onClick in ReactJS?

Question

I built a simple counter app in ReactJS. Code is below.

import React, { useState } from "react";
import "./styles.css";

export default function App() {
    const [countNum, setCountNum] = useState(0);

    function increaseCount() {
        setCountNum(countNum + 1);
    }

    function decreaseCount() {
        if (countNum > 0) {
            setCountNum(countNum - 1);
        }
    }

    function disableChecker() {
        if (countNum === 0) {
            return true;
        } else {
            return false;
        }
    }

    return (
        <div className="App">
            <button onClick={() => decreaseCount()} disabled={disableChecker()}>Decrease</button>
            <button onClick={() => increaseCount()}>Increase</button>
            <h2>{countNum}</h2>
        </div>
    );
}

I just want to know why does onClick={() => increaseCount()} works AND why onClick={increaseCount()} or onClick={() => increaseCount} doesn't work?

A beginner here, please guide me to the answer.

Because one calls the function and passes what it returns as the handler, and the other returns but doesn't call the function when the handler is invoked. — jonrsharpe
– jonrsharpe, Commented Nov 1, 2021 at 20:13
Also, note that disabled={countNum === 0} would be enough, there's no need for a function. — Emile Bergeron
– Emile Bergeron, Commented Nov 1, 2021 at 20:14
In JavaScript, a function is invoked by using parentheses () following the function name. — jsejcksn
– jsejcksn, Commented Nov 1, 2021 at 20:15
@EmileBergeron thank you for this. Will use this from now on. — ChhikaraBRUH
– ChhikaraBRUH, Commented Nov 1, 2021 at 20:27

Tushar Shahi · Accepted Answer · 2021-11-01 20:19:05Z

14

onClick={() => increaseCount()} -> assigns a function as an event handler to onclick. The function's body has increaseCount() inside it. So when the function runs (on event trigger), increaseCount is executed/run.

onClick={increaseCount()} -> React runs increaseCount as soon as this code is encountered. increaseCount changes state and causes a re-render, and in the next render cycle same thing happens causing a cycle. This should have infinite renders.

onClick={() => increaseCount} -> Like the first one but here inside the function body, () is missing after increaseCount. This does not execute the function increaseCount when the event happens. A simple statement with function name without the parentheses will do nothing.

answered Nov 1, 2021 at 20:19

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

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

2 Comments

Aladdin Over a year ago

so since the arrow function is an asynchronous function it waits for user to click and executes the function inside it when a click happens but if we pass increaseCount() directly then after clicking it keeps on changing the state and causing infinite loop?

Tushar Shahi Over a year ago

You do not call a function asynchronous because it runs only when executed right? All functions need to be executed to run. The arrow function is just another function. It will run ON CLICK. In the second case, increaseCount() is running everytime because it is directly in the script/code. It is not wrapped in a function at all. The JS engine is just going through the code, and running it. It is being triggered because the OP has written it like that. It is the same as writing increaseCount() in the React component body. It will always run @Aladdin

Alpfreda · Accepted Answer · 2021-11-01 20:21:56Z

3

Why is my function being called every time the component renders? Make sure you aren’t calling the function when you pass it to the component:

render() {
 // Wrong: handleClick is called instead of passed as a reference!
 return <button onClick={handleClick()}>Click Me</button>
}

Instead, pass the function itself (without parens):

render() {
  // Correct: handleClick is passed as a reference!
  return <button onClick={handleClick}>Click Me</button>
}

You can use an arrow function to wrap around an event handler and pass parameters:

<button onClick={() => handleClick(id)} />

answered Nov 1, 2021 at 20:21

Alpfreda

3961 silver badge7 bronze badges

Collectives™ on Stack Overflow

Difference between using Arrow function or function for onClick in ReactJS?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related