title: Component not re rendering when value from useContext is updated
body: <p>I'm using React's context api to store an array of items. There is a component that has access to this array via useContext() and displays the length of the array. There is another component with access to the function to update this array via useContext as well. When an item is added to the array, the component does not re-render to reflect the new length of the array. When I navigate to another page in the app, the component re-renders and reflects the current length of the array. I need the component to re-render whenever the array in context changes.</p>
  
  <p>I have tried using Context.Consumer instead of useContext but it still wouldn't re-render when the array was changed. </p>
  
  <pre><code>//orderContext.js//
  
  import React, { createContext, useState } from "react"
  
  const OrderContext = createContext({
    addToOrder: () =&gt; {},
    products: [],
  })
  
  const OrderProvider = ({ children }) =&gt; {
    const [products, setProducts] = useState([])
  
    const addToOrder = (idToAdd, quantityToAdd = 1) =&gt; {
      let newProducts = products
      newProducts[newProducts.length] = {
        id: idToAdd,
        quantity: quantityToAdd,
      }
      setProducts(newProducts)
    }
  
    return (
      &lt;OrderContext.Provider
        value={{
          addToOrder,
          products,
        }}
      &gt;
        {children}
      &lt;/OrderContext.Provider&gt;
    )
  }
  
  export default OrderContext
  export { OrderProvider }
  </code></pre>
  
  <pre><code>//addToCartButton.js//
  
  import React, { useContext } from "react"
  import OrderContext from "../../../context/orderContext"
  
  export default ({ price, productId }) =&gt; {
    const { addToOrder } = useContext(OrderContext)
  
    return (
      &lt;button onClick={() =&gt; addToOrder(productId, 1)}&gt;
        &lt;span&gt;${price}&lt;/span&gt;
      &lt;/button&gt;
    )
  }
  
  </code></pre>
  
  <pre><code>//cart.js//
  
  import React, { useContext, useState, useEffect } from "react"
  import OrderContext from "../../context/orderContext"
  
  export default () =&gt; {
    const { products } = useContext(OrderContext)
    return &lt;span&gt;{products.length}&lt;/span&gt;
  }
  </code></pre>
  
  <pre><code>//gatsby-browser.js//
  
  import React from "react"
  import { OrderProvider } from "./src/context/orderContext"
  export const wrapRootElement = ({ element }) =&gt; (
     &lt;OrderProvider&gt;{element}&lt;/OrderProvider&gt;
  )
  </code></pre>
  
  <p>I would expect that the cart component would display the new length of the array when the array is updated, but instead it remains the same until the component is re-rendered when I navigate to another page. I need it to re-render every time the array in context is updated.</p>