too many re renders with add count button - reactjs

Question

I am new to React. I have a simple page with buttons which increase the count by 1 or decrease by 1. The solution shows the right way which is by using inline functions for the minus button.However when I changed the plus button to use a regular function, I am getting too many re render.
import React, { useState } from 'react'
import randomColor from 'randomcolor'
export default function Playground() {
const [count, setCount] = useState(0)
const add = (n) =>{
setCount(n+1);
};
return (
<div>
{count}
<button onClick={() => add(count)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
</div>
)
}

Answer 1

<button onClick={add(count)}>+</button> immediately triggers add function when the component render.
Try this:
import React, { useState } from 'react'
import randomColor from 'randomcolor'
export default function Playground() {
const [count, setCount] = useState(0)
const add = () =>{
setCount(count+1);
};
return (
<div>
{count}
<button onClick={() => add()}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
</div>
)
}

Answer 2

You can use regular function or arrow function. But in your case, you were calling the add function every time it re-renders. Consider the difference in the following vanilla JavaScript code snippets:
function add() {
console.log("Add");
}
document.getElementById("Button").addEventListener("click", add);
vs
function add() {
console.log("Add");
}
document.getElementById("Button").addEventListener("click", add()); //<--
The first one is the way to go.
In the React world, the following implementations are all valid:
function ButtonWithArrowFunction() {
const handleClick = () => {
console.log("Clicked");
};
return <button onClick={handleClick}>Press Me</button>;
}
function ButtonWithInlineArrowFunction() {
return (
<button
onClick={() => {
console.log("Clicked");
}}
>
Press Me
</button>
);
}
function ButtonWithRegularFunction() {
function handleClick() {
console.log("Clicked");
}
return <button onClick={handleClick}>Press Me</button>;
}
function ButtonWithInlineRegularFunction() {
return (
<button
onClick={function handleClick() {
console.log("Clicked");
}}
>
Press Me
</button>
);
}
function ButtonWithHigherOrderFunction() {
function createHandleClickFunction() {
return function handleClick() {
console.log("Clicked");
};
}
return <button onClick={createHandleClickFunction()}>Press Me</button>;
}

Answer 3

you can not pass add() because it will execute the funcition and will trigger an infinite cycle. Just pass the reference add of the method, so it will execute only on the click event
import React, { useState} from 'react'
const App = () => {
const [count, setCount] = useState(0);
const add = (n) =>{
setCount(count+1);
}
return (
<div>
{count}
<button onClick={add}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
</div>
)
}
export default App;