title: How to use useEffect correctly with useContext as a dependency
body: <p>I'm working on my first React project and I have the following problem.
  How I want my code to work:</p>
  <ul>
  <li>I add Items into an array accessible by context (context.items)</li>
  <li>I want to run a useEffect function in a component, where the context.items are displayed, whenever the value changes</li>
  </ul>
  <p>What I tried:</p>
  <ol>
  <li>Listing the context (both <code>context</code> and <code>context.items</code>) as a dependency in the useEffect</li>
  </ol>
  <ul>
  <li>this resulted in the component not updating when the values changed</li>
  </ul>
  <ol start="2">
  <li>Listing the <code>context.items.length</code></li>
  </ol>
  <ul>
  <li>this resulted in the component updating when the length of the array changed however, not when the values of individual items changed.</li>
  </ul>
  <ol start="3">
  <li>wraping the context in <code>Object.values(context)</code></li>
  </ol>
  <ul>
  <li>result was exactly what I wanted, except React is now Complaining that *The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant. *</li>
  </ul>
  <p>Do you know any way to fix this React warning or a different way of running useEffect  on context value changing?</p>
  <p>Well, didn't want to add code hoping it would be some simple error on my side, but even with some answers I still wasn't able to fix this, so here it is, reduced in hope of simplifying.</p>
  <p>Context component:</p>
  <pre><code>const NewOrder = createContext({
    orderItems: [{
      itemId: &quot;&quot;,
      name: &quot;&quot;,
      amount: 0,
      more:[&quot;&quot;]
    }],
    addOrderItem: (newOItem: OrderItem) =&gt; {},
    removeOrderItem: (oItemId: string) =&gt; {},
    removeAllOrderItems: () =&gt; {},
  });
  
  export const NewOrderProvider: React.FC = (props) =&gt; {
    // state
    const [orderList, setOrderList] = useState&lt;OrderItem[]&gt;([]);
  
    const context = {
      orderItems: orderList,
      addOrderItem: addOItemHandler,
      removeOrderItem: removeOItemHandler,
      removeAllOrderItems: removeAllOItemsHandler,
    };
  
    // handlers
    function addOItemHandler(newOItem: OrderItem) {
      setOrderList((prevOrderList: OrderItem[]) =&gt; {
        prevOrderList.unshift(newOItem);
        return prevOrderList;
      });
    }
    function removeOItemHandler(oItemId: string) {
      setOrderList((prevOrderList: OrderItem[]) =&gt; {
        const itemToDeleteIndex = prevOrderList.findIndex((item: OrderItem) =&gt; item.itemId === oItemId);
        console.log(itemToDeleteIndex);
        prevOrderList.splice(itemToDeleteIndex, 1);
        return prevOrderList;
      });
    }
    function removeAllOItemsHandler() {
      setOrderList([]);
    }
  
    return &lt;NewOrder.Provider value={context}&gt;{props.children}&lt;/NewOrder.Provider&gt;;
  };
  
  export default NewOrder;
  </code></pre>
  <p>the component (a modal actually) displaying the data:</p>
  <pre><code>const OrderMenu: React.FC&lt;{ isOpen: boolean; hideModal: Function }&gt; = (
    props
  ) =&gt; {
  const NewOrderContext = useContext(NewOrder);
  useEffect(() =&gt; {
      if (NewOrderContext.orderItems.length &gt; 0) {
        const oItems: JSX.Element[] = [];
        NewOrderContext.orderItems.forEach((item) =&gt; {
          const fullItem = {
            itemId:item.itemId,
            name: item.name,
            amount: item.amount,
            more: item.more,
          };
          oItems.push(
            &lt;OItem item={fullItem} editItem={() =&gt; editItem(item.itemId)} key={item.itemId} /&gt;
          );
        });
        setContent(&lt;div&gt;{oItems}&lt;/div&gt;);
      } else {
        exit();
      }
    }, [NewOrderContext.orderItems.length, props.isOpen]);
  </code></pre>
  <p>some comments to the code:</p>
  <ul>
  <li>it's actually done in Type Script, that involves some extra syntax
  -content (and set Content)is a state which is then part of return value so some parts can be set dynamically
  -exit is a function closing the modal, also why props.is Open is included</li>
  <li>with this <code>.length </code> extension the modal displays changes when i remove an item from the list, however, not when I modify it not changeing the length of the orderItems,but only values of one of the objects inside of it.</li>
  <li>as i mentioned before, i found some answers where they say i should set the dependency like this: <code>...Object.values(&lt;contextVariable&gt;)</code> which technically works, but results in react complaining that *The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant. *</li>
  <li>the values displayed change to correct values when i close and reopen the modal, changing <code>props.isOpen</code> indicating that the problem lies in the context dependency</li>
  </ul>