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

user_13406226 0
Viewed 1287

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.

arrow-functions jsx reactjs javascript
2 Answers

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.

user_101401240

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