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

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.

CodePudding user response：

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.

CodePudding user response：

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