React shopping cart hook localstorage persistence issue

Medium

In a React e-commerce application, you need to implement a shopping cart hook that persists across page refreshes. What's wrong with this custom hook implementation?

ReactReact hooksLocalstorageState managementCustom hooks

1function useShoppingCart() {
const [cart, setCart] = useState([]);

useEffect(() => {
  const savedCart = localStorage.getItem('cart');
  if (savedCart) {
    setCart(JSON.parse(savedCart));
  }
}, []);

const addToCart = (product) => {
  const updatedCart = [...cart, product];
  setCart(updatedCart);
  localStorage.setItem('cart', JSON.stringify(cart));
};

const removeFromCart = (productId) => {
  const updatedCart = cart.filter(item => item.id !== productId);
  setCart(updatedCart);
  localStorage.setItem('cart', JSON.stringify(cart));
};

return { cart, addToCart, removeFromCart };
24}

In a React e-commerce application, you need to implement a shopping cart hook that persists across page refreshes. What's wrong with this custom hook implementation?

Hint