title: ReactContext regular function gets called causing error but not for arrow function?
body: <p>Hi i am pretty new to React.</p>
  <p>Here is my code:</p>
  <pre><code>const cartCtx=useContext(CartContext);
  
  const cartItems = (
      &lt;ul className={classes['cart-items']}&gt;
        {cartCtx.items.map((item) =&gt; (
          &lt;CartItem 
          key={item.id}
          name={item.name}
          amount={item.amount}
          price={item.price}
          onAdd={cartCtx.addItem(item)}
  ....
  </code></pre>
  <p>I am trying to add item by calling onAdd function which existed in my ReactContext.</p>
  <p>However, I get this error when running:</p>
  <p>Warning: Cannot update a component (<code>CartProvider</code>) while rendering a different component (<code>Cart</code>). To locate the bad setState() call inside <code>Cart</code>.</p>
  <p>After I change onAdd function call to an arrow function:</p>
  <pre><code>const cartItems = (
      &lt;ul className={classes['cart-items']}&gt;
        {cartCtx.items.map((item) =&gt; (
          &lt;CartItem 
          key={item.id}
          name={item.name}
          amount={item.amount}
          price={item.price}
          onAdd={()=&gt;cartCtx.addItem(item)}
  ....
  </code></pre>
  <p>The problem gets resolved.</p>
  <p>Here is my onAdd function inside ReactContext:</p>
  <pre><code>const defaultCartState = {
    items: [],
    totalAmount: 0
  };
  
  const cartReducer = (state, action) =&gt; {
  
    if (action.type === 'ADD') {
      
      const updatedTotalAmount = state.totalAmount + action.item.price * action.item.amount;
  
      const existingCartItemIndex=state.items.findIndex((item)=&gt;item.id===action.item.id);
  
      const existingCartItem=state.items[existingCartItemIndex]
  
     
      let updatedItems;
      let updateItem;
      if (existingCartItem){
         
         updateItem={...existingCartItem,
         amount:action.item.amount+existingCartItem.amount
        }
         updatedItems=[...state.items]
         updatedItems[existingCartItemIndex]=updateItem;
      }
      else{
       updatedItems = state.items.concat(action.item);}
  
      return {
        items: updatedItems,
        totalAmount: updatedTotalAmount
      };
      
    }
    return defaultCartState;
  };
  
  const CartProvider = (props) =&gt; {
    const [cartState, dispatchCartAction] = useReducer(cartReducer, defaultCartState);
  
    const addItemToCartHandler = (item) =&gt; {
      dispatchCartAction({type: 'ADD', item: item});
    };
  
  
    const cartContext = {
      items: cartState.items,
      totalAmount: cartState.totalAmount,
      addItem: addItemToCartHandler
    };
  
    return (
      &lt;CartContext.Provider value={cartContext}&gt;
        {props.children}
      &lt;/CartContext.Provider&gt;
    );
  };
  
  export default CartProvider;
  </code></pre>
  <p>Does anyone know why this happens and what is the logic behind the scene?</p>