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.

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.

• javascript
• reactjs
• jsx
• arrow-functions

• 2 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 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 Commented Nov 1, 2021 at 20:14
• In JavaScript, a function is invoked by using parentheses () following the function name. – jsejcksn Commented Nov 1, 2021 at 20:15
• @EmileBergeron thank you for this. Will use this from now on. – ChhikaraBRUH Commented Nov 1, 2021 at 20:27

2 Answers 2

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.

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

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)} />