React hooks not updating components

Question

I'm trying to set up an order list with react hooks. The method is correct but the components aren't updating until i force it from React dev tools. The button that add the order is in a component and the list is a different component.

I tried setting useEffect but the result is the same.

Here is the state declaration and the method

const [orderList, setOrderList] = React.useState([]);

const addToOrderList = (order) => {
    const list = orderList;
    if (list)
      list.push(order);
    setOrderList(list);
  }

And here the components in the render

<div className="w-3/5">
  <ItemDeliveryCard
    fromMenu={true}
    selectedMenu={selectedMenu}
    orderList={orderList}
    onClickHandler={(order) => addToOrderList(order)}
  />
</div>
<div >
  <DeliveryCard orderListProp={orderList} />
</div>

The button in ItemDeliveryCard

<button
   onClick={() => onClickHandler(product)}
   className={gradients.redGradToL + " w-80 flex flex-row items-center justify-center mb-5"}
>
   <p className="uppercase">select this offer</p>
</button>

I tried the solutions from this post but useEffect doesn't seems to work

You're modifying your `orderList` array directly, and passing `setOrderList` a reference to the same array. `const list = orderList;` doesn't create a copy like you might think — Nick Parsons, Oct 27 '21 at 10:00
ok, but the method actually works, it's just components not updating. As soon as i force the update the array is populated correctly. Could this be caused by this line? — IlJeko, Oct 27 '21 at 10:03
It pushes the value into the array, but I wouldn't say it works as expected. It's not updating your component because react doesn't think your state has changed from the previous render as you're modifying your state directly (which shouldn't be done). If you create a new array and set that as your state, react will notice that state change and re-render, eg: `setOrderList([...orderList, order])` — Nick Parsons, Oct 27 '21 at 10:06

score 2 · Accepted Answer · answered Oct 27 '21 at 10:07

2

You are mutating state where you need to treat it as immutable, try instead:

const addToOrderList = (order) => {
  if (orderList) {
    setOrderList(prevList => [...prevList, order]);
  }
}

answered Oct 27 '21 at 10:07

Dennis Vash

50,196
9
100
118

score 2 · Answer 2 · answered Oct 27 '21 at 10:11

The React hook way to modify a state:

const addToOrderList = (order) => {
  setOrderList(list => (list ? list : []).concat(order));
}

A little explanation:

Reason your code doesn't trigger update, is because the new value of list that you set, setOrderList(newValue), is the same array reference as old value, React doesn't detect this mutation, thus no update.
It's recommended you use the updater function pattern:

setValue(oldValue => {
  /* whatever mutation logic you need */
  return newValue
})

Instead of moving the mutation logic outside then set the final value, like what you do currently. Reason is that this pattern would mitigate the stale closure problem.

React hooks not updating components

2 Answers2