reactjs - setState is not updating state at all

Question

I cant figure out why my setStock function is not updating the state and not causing a re-render, while I have several other functions working just fine.

const addToStockOperation = async (addOperation) => {
  const payload = {
    ...
  };

  const jwtToken = {
    ...
  };

  const addToStockOperationResult = await axios.put(`${apiEndpoint}/stock/addtoitem`, payload, jwtToken);

    setStock((prevStock) => {
      const indexOfModifiedStock = prevStock.findIndex((stock) => stock._id === addOperation.id);

      console.log(prevStock[indexOfModifiedStock].operations.added.length);
      prevStock[indexOfModifiedStock].operations.added = addToStockOperationResult.data.operations.added;
      console.log(prevStock[indexOfModifiedStock].operations.added.length);
 
      return prevStock;
    });
};

Both console logs confirm that the modification of prevStock did happen, as the second console.log shows a length of +1 compared to the previous length, so that indicates that the desired part of prevStock was indeed updated, however, a re-render is not caused.

I have also tried making a copy of prevStock const stockCopy = {...prevStock}; and modifying the copy and returning the copy, but no change.

I have also tried simply to return 1; just to see if a re-render will get triggered, still nothing.

I have a few other similar functions that are working just fine and are causing a re-render as expected:

This one is working just fine for setting products:

const setProductsWrapper = async (product) => {
  const addProductResult = await axios.post(
    `${apiEndpoint}/product/one`,
    payload,
    token
  );

  addProductResult.data.name === product.name &&
    setProducts((prevProducts) => [addProductResult.data, ...prevProducts]);
};

EDIT: I found the issue, silly me, stock is an array return [...stockCopy]; after modifying the copy, worked.

Answer 1

Returning prevStock is never going to work because it is the current state array (i.e. has reference equality with it) - you need to return a new array for a new render to be triggered. However, it seems likely that an issue is also arising with mutated state.

You're on the way there when you create the copy const stockCopy = [...prevStock], but the problem is that this only copies the state array to one level of depth. Any objects nested inside it, like .operations, will retain their reference equality to the objects in the original state array.

Mutating them directly means that when you return your copy, any effects which rely on a difference in reference equality between these sub-objects will not run because they are already equal. There is no diff-ing to be done.

To fix this you will have to deeply copy the relevant parts of the tree:

setStock((prevStock) => {
    const stockCopy = [...prevStock];
    const stockIndex = stockCopy.findIndex((stock) => stock._id === addOperation.id);
    
    stockCopy[stockIndex] = {
      ...stockCopy[stockIndex],
      operations: {
        ...stockCopy[stockIndex].operations,
        added: addToStockOperationResult.data.operations.added
      }
    };
    
    return stockCopy;
});

State mutation sandbox

This can get quite annoying (and potentially expensive) when the data structure is large enough. It's always better to avoid structures like this in immutable state if you can help it. Of course that's often not the case and there are tools to help deal with immutability that can cut down on bloated code if it starts to become an issue.