title: React Reducer Updates Twice
body: <p>I understand that in Strict Mode, the reducer should run twice. However, it shouldn't actually update the values twice.</p>
  <p>The quantity for items gets updated twice.
  For example, there is an item, <code>items: [{name: tshirt, price: 10, quantity: 1}]</code> already in the cart. If call <code>addItem(state, tshirt, 1)</code>, the cart will update to <code>items: [{name: tshirt, price: 10, quantity: 3}]</code>.</p>
  <p>Only the quantity value inside the items array is updated twice. The outside variables such as <code>value</code> and <code>total_qty</code> only update once.</p>
  <p>How do I stop it updating twice without turning off StrictMode?</p>
  <pre><code>interface Product {
      name: string,
      materials: string[],
      categories: string[],
      price: number,
      image?: string
  }
  
  interface ICartItem extends Product {
      quantity: number
  }
  
  interface Cart {
      items: {[key: string]: ICartItem},
      value: number,
      total_qty: number   
  }
  
  const addItem = (state: Cart, product: Product, quantity: number) =&gt; {
      let item = state?.items?.[product.name];
      if (item) {
          item.quantity += quantity;
      } else {
          item = {
              ...product,
              quantity
          }
      }
      let updatedCart = {
          ...state,
          items: {
              ...state.items,
              [product.name]: item
          },
          value: Math.max(0, state.value + (product.price * quantity)),
          total_qty: Math.max(0, state.total_qty + quantity)
      }
      return updatedCart;
  }
  
  const cartReducer: Reducer&lt;Cart, UpdateCartAction&gt; = (state: Cart, action: UpdateCartAction) =&gt; {
      switch (action.type) {
          case 'ADD_ITEM':
              return addItem(state, action.product, action.quantity);
          case 'REMOVE_ITEM':
              return removeItem(state, action.product, action.quantity);
          case 'CLEAR_CART':
              return clearCart();
          default:
              return state;
      }
  }
  
  export const CartContext = React.createContext&lt;ICartContext | undefined&gt;(undefined);
  
  export const CartProvider = ({children}: {children: ReactNode}) =&gt; {
  
      const {cart, dispatch} = useLocalStorageReducer(
          'cart',
          cartReducer,
          initialCart
      );
  
      const contextValue = useMemo(()=&gt;{
          return {cart, dispatch}
      }, [cart]);
  
      return (
          &lt;CartContext.Provider value={contextValue}&gt;{children}&lt;/CartContext.Provider&gt;
      )
  }
  
  export const useCart = () =&gt; {
  
      const contextValue = useContext(CartContext);
      let cart: Cart | undefined, dispatch: Dispatch&lt;any&gt; | undefined;
      if (contextValue) {
          cart = contextValue.cart;
          dispatch = contextValue.dispatch;
      }
  
      const addItem = (product: Product, quantity: number) =&gt; {
          if (dispatch) dispatch({type: &quot;ADD_ITEM&quot;, product, quantity});
      }
      
      return {
          cart,
          addItem
      }
  
  }
  </code></pre>