title: dom is not updated after state change via Context API
body: <p>I am quite new to React and tried to finish a project on FrontendMentor. It's basically a simple OPA of an online store with just one product and the ability to add this product to a cart.</p>
  <p>I thought it would be a good idea to learn about Reacts Context API so that I get a basic understanding.</p>
  <p>The first context that I created basically looks like this:</p>
  <pre><code>import { createContext, useContext, useState } from &quot;react&quot;;
  
  export const CartContext = createContext();
  
  export const CartProvider = ({ children }) =&gt; {
    const cartValue = useCartProvider();
    return (
      &lt;CartContext.Provider value={cartValue}&gt;{children}&lt;/CartContext.Provider&gt;
    );
  };
  
  export const useCart = () =&gt; {
    return useContext(CartContext);
  };
  
  export const useCartProvider = () =&gt; {
    const initialValue = [{name: name, price: price, amount: amount}];
    const [cartAmount, setCartAmount] = useState(initialValue);
  
    const addToCart = (name, price, amount) =&gt; {
      setCartAmount([
        ...cartAmount,
        { name: name, price: price, amount: amount },
      ]);
    };
    return {
      cartAmount,
      setCartAmount,
      addToCart,
    };
  };
  
  </code></pre>
  <p>When I add something to the Cart, I want to display the current amount of products in the cart with a little number above the cart. I implemented everything to the point that I see the number and can access the state variable <code>cartAmount</code> in the Navbar component.</p>
  <p>Unfortunately it does not update. When I add to the cart I can console.log the event but the badge above the cart is not being updated.</p>
  <p>Also - the update does not happen in real time.</p>
  <p>I've read about Reacts ability to badge state updates for performance reasons and I also read about using <code>useReducer</code> hook for the actions.</p>
  <p>With my current knowledge I feel like I cannot make the connection between all of these elements, yet.</p>
  <p>Would like your help on that - please let me know if you need more information than provided.</p>
  <p>Thanks in advance.</p>