Error( "Too many re-renders. React limits the number of renders to prevent an infinite loop." Functional Component and doesn't render

Question

This is my component :

import React, { useState } from "react";

const Product = () => {
    const [count, setCount] = useState(0);
    return ( 
        <>
        <span className="m-2 text-info">Laptop</span>
        <span className="m-2 badge bg-primary">{format()}</span>
        <button onClick={increase()} className="m-2 btn-sm btn-success">+</button>
        <button onClick={decrease()} className="m-2 btn-sm btn-warning">-</button>
        <button onClick={delet()} className="m-2 btn-sm btn-danger">Delete🗑</button>
        </> 
     );

     function increase(){
          setCount(count + 1);
      }
      
     function decrease(){
          setCount(count - 1);
      }
     function delet(){
          setCount(count - count);
      }
      
     function format(){
          if (count === 0){
              return "Zero";
          }else{
              return count;
          }
      }
}
 
export default Product;

Answer 1

You should change onClick functions to arrow function :

<button onClick={() => increase()} 

Answer 2

You have to update your onClick trigger and also you have to reformat your functions as i see you have used functions after return().

So the right code will be this:

const Product = () => {
    const [count, setCount] = useState(0);


     function increase(){
          setCount(count + 1);
      }
      
     function decrease(){
          setCount(count - 1);
      }
     function delete(){
          setCount(count - count);
      }
      
     function format(){
          if (count === 0){
              return "Zero";
          }else{
              return count;
          }
      }

    return ( 
        <>
        <span className="m-2 text-info">Laptop</span>
        <span className="m-2 badge bg-primary">{format()}</span>
        <button onClick={() => {increase()}} className="m-2 btn-sm btn-success">+</button>
        <button onClick={() => {decrease()}} className="m-2 btn-sm btn-warning">-</button>
        <button onClick={() => {delete()}} className="m-2 btn-sm btn-danger">Delete?</button>
        </> 
     );
}
 
export default Product