Array values in state of functional component not updating

Question

I have setup a useState hook as follows.

  const [products, setProducts] = useState([
    {
      id: 1,
      qty: 0,
    },
    {
      id: 2,
      qty: 0,
    }
  ]);

I have a TouchOpacity component which fires the following function when pressed.

 const _onPress = () => {
    const productArr = products;
    productArr[0].qty = value;
    setProducts(productArr);
  };

The expected outcome is that product with id 1 must increase the qty to 1, however this does not happen.

When i use the spread operator for the products from state as follows it works as expected.

 const _onPress = () => {
    const productArr = [...products];
    productArr[0].qty = value;
    setProducts(productArr);
  };

What is the reason for this ?

With your first code block you attempt to mutate state directly (which is not recommended to do and won't trigger re-render). Second block does shallow copy of state array and properly assigns modified version of that array to products — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Mar 6, 2020 at 11:55
Why is const productArr = products; not considered as copying an array ? I am creating a new variable right ? — Muljayan
– Muljayan, Commented Mar 6, 2020 at 12:00

Yuan-Hao Chiang · Accepted Answer · 2020-03-06 13:13:31Z

1

Note that even with the spread operator, in both of your examples, you are mutating the state.

If you need to use arrays inside your state or nested structures, I would highly recommend trying a library such as immer which will simplify things, is more efficient than recreating objects, and overall will give you a very good sense of notion of not mutating the state:

import produce from "immer";

const [products, setProducts] = useState([
  {
    id: 1,
    qty: 0,
  },
  {
    id: 2,
    qty: 0,
  }
]);

const _onPress = () => {
  setProducts(
    produce(products, draft => draft[0].qty = value)
  );
}

answered Mar 6, 2020 at 13:13

Yuan-Hao Chiang

2,64312 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Array values in state of functional component not updating

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related