Component not re rendering when value from useContext is updated

The issue is likely that you’re mutating the array (rather than setting a new array) so React sees the array as the same using shallow equality.

Changing your addOrder method to assign a new array should fix this issue:

const addToOrder = (idToAdd, quantityToAdd = 1) =>
  setProducts([
    ...products,
    {
      id: idToAdd,
      quantity: quantityToAdd
    }
  ]);

Edit context-arrays

Leave a Comment