UPD: fix infinity loop in Order useEffect

src/components/mainPage/landing.jsx

@@ -14,14 +14,11 @@ const Details = () => {
 
   // refresh the cart logo and amount of the cart
   useEffect(() => {
-
     let sub_total = cart.reduce((sum, it)=>{
       console.log(it.price);
       return it.price+sum
     },0);
-
     setTotal(sub_total);
-
     console.log("effect", total)
   },[cart, total]);
 
@@ -29,7 +26,7 @@ const Details = () => {
     <>
       <ShowCase />
       {/* you can try 600011 in orderID */}
-      <Orders orderID={orderID} setOrderID={setOrderID} invoice={invoice} />
+      <Orders orderID={orderID} setOrderID={setOrderID} invoice={invoice} setInvoice={setInvoice}  />
       <AllProducts setCart={setCart} />
       <CartIcon count={cart?.length} total={total}   />
       <Purchase />

src/components/orders/orders.jsx

@@ -37,7 +37,7 @@ const invoiceShape = (order) => {
 }
 
 
-const Orders = ({ orderID, setOrderID, invoice }) => {
+const Orders = ({ orderID, setOrderID, invoice, setInvoice }) => {
   const orders = useGetOrders(orderID);
   const [results, setOrder] = useSetOrder();
 
@@ -50,11 +50,13 @@ const Orders = ({ orderID, setOrderID, invoice }) => {
   }, [results, setOrderID]); //didUpdate
 
   useEffect(() => {
+    console.log("Invoice: ", invoice && invoiceShape(invoice));
     if (invoice) {
-      console.log("Invoice: ", invoiceShape(invoice));
+      // console.log("Invoice: ", invoiceShape(invoice));
       setOrder(invoiceShape(invoice));
+      setInvoice(null);
     }
-  }, [invoice]); //missing dep warning
+  }, [invoice, setOrder, setInvoice]); //missing dep warning
 
   const onClick = (event) => {
     setOrder(sampleOrder);