Array does not update after it is set to update (React)

Question

const [cart, setCart] = useState([])

I'm trying to add some products to cart, it got added to local storage and does not reflect on the cart array itself;

At first, I'm checking if the product exist, if it exist, update the qty, if it doesn't add to it. It worked for if it exist, but at the first click of the button, it does not update the cart array to the product. It is as if on first click, it does not set but on second click, it sets to qty = 1 which suppose to be qty = 2

// Add Product to cart
      const addProduct = (product) => {
        const exist = cart.find((x) => x.id === product.id);
        if (exist) {
          setCart(
            cart.map((x) => 
              x.id === product.id ? { ...exist, qty: exist.qty + 1 } : x;
            )
          );
          localStorage.setItem("cart", JSON.stringify(cart));
          // Cart is there
          console.log(cart);
        } else {
          setCart([...cart, { ...product, qty: 1 }]);
          localStorage.setItem("cart", JSON.stringify(cart));
          // Cart is empty
          console.log(localStorage.getItem("cart"));
          // Cart is also empty
          console.log(cart);
        }
      };

Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — David, Mar 04 '22 at 14:39
Can you elaborate in your question how this sitatiuon is different? In the code shown you are setting a state value and then immediately trying to read that state value before it's been updated, since state updates are asynchronous. What makes this scenario different from the many, many other identical questions in which developers do that exact thing? — David, Mar 04 '22 at 14:42

score 2 · Accepted Answer · answered Mar 04 '22 at 14:51

This is totally normal: infact, setCart is async and you can't log the very last value adding a console.log just after setCart call.

You should use the useEffect hook to "listen" when cart has changed.

Something like:

const [cart, setCart] = useState([]);


useEffect(() => {
  console.log(cart); // here, for each cart change, you will print the very last value
  localStorage.setItem("cart", JSON.stringify(cart)); // if value is here, you could store it...
  console.log(localStorage.getItem("cart")); // ...and of course read it
},[cart]);


// Add Product to cart
      const addProduct = (product) => {
        const exist = cart.find((x) => x.id === product.id);
        if (exist) {
          setCart(
            cart.map((x) => 
              x.id === product.id ? { ...exist, qty: exist.qty + 1 } : x;
            )
          );
        } else {
          setCart([...cart, { ...product, qty: 1 }]);
        }
      };

No problem =) happy coding – Giovanni Esposito Mar 04 '22 at 14:57 — Giovanni Esposito, Mar 04 '22 at 14:57

Array does not update after it is set to update (React)

1 Answers1