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));
  };

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

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

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