CartProvider.jsx

import {
  createContext,
  useContext,
  useEffect,
  useMemo,
  useState,
} from 'react';

export const CartContext = createContext(null);
export function useCartContext() {
  return useContext(CartContext);
}

export function CartProvider({ children }) {
  const [cart, setCart] = useState([]);
  const [total, setTotal] = useState(0);

  const add = (name, price) => {
    setCart(cart.concat([{ name, price }]));
  };

  const remove = (name) => {
    setCart(cart.filter((obj) => obj.name !== name));
  };

  const reset = () => {
    setCart([]);
  };

  useEffect(() => {
    setTotal(cart.reduce((acc, obj) => acc + obj.price, 0));
  }, [cart]);

  const memoized = useMemo(() => ({
    cart,
    total,
    add,
    remove,
    reset,
  }), [cart, total]);

  return (
    <CartContext.Provider value={memoized}>
      {children}
    </CartContext.Provider>
  );
}