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.
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.