How to fix this Infinite loop in react

Question

I wanted to pass clicked item to the new array so that it can pass to the new order page but sending items as props gives an infinity loop and the cart keeps on increasing for some reasons

const handlecart=(item)=>{
    setCount(count+1)
    setItem(item)
  }
 

{localitem.map((product) => (
              <div key={product._id} className="group relative">
                <div>
                  <img
                    src={product.image}
                    alt={"image"}
                    className="w-full h-full object-center object-cover lg:w-full lg:h-full"
                  />
                </div>
                <div className="mt-4 flex justify-between">
                  <div>
                    <h3 className="text-sm text-gray-700 font-semibold">
                      {product.name}
                    </h3>
                  <h4 className="text-base font-medium text-gray-900">
                    Price<p className="inline-block line-through">{product.price}</p> 
                     ${product.price}
                  </h4>
                  </div>

                  <div className="px-3">
                    <button>buy</button>
                    <button onClick=()=>handlecart(product)>cart</button>
                  </div>
                </div>
              </div>
            ))}

as soon as I pass product as props it is stuck in the loop can anyone explain this thank you And how to pass clicked product data so that it can store in the state

Answer 1

The reason this keeps happening is because your function

const handlecart=(item)=>{
    setCount(count+1)
    setItem(item)
}

Is triggering a re-render of this component hence why you're seeing it increase infinitely. For example, each time you set the count by incrementing it +1, you're essentially telling React that since count has changed please re-render and show me the new component.

I suspect what you're looking for is useCallback

const handleCart = useCallback(() => {
   setCount(count => count + 1)
   ...
}, [setCount])

Answer 2

As it has been said, <button onClick={handlecart(product)}>cart</button> is at fault here, because your are calling the function when you write handlecart(product) . This rerenders the component, hence the infinite loop.

onClick needs a function definition . So you need to write:

onClick={() => handlecart(product)}

Basically, tell it what to do, not to do it.

Answer 3

The below line is causing infinite render.

<button onClick={handlecart(product)}>cart</button>

instead of passing the reference of the handleCart , you are calling the function itself, so when interpreter will parse your code it will execute the function before you even click on it. Since function will be called state will be updated, component will be re -rendered and henceforth function will be called again..... again the cycle will continue , which is why you are getting infinite renders

try this

<button onClick={() => handlecart(product)}>cart</button>