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

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 ponents 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

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

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 ponents 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

• javascript
• reactjs
• react-hooks

Share Improve this question Follow asked Oct 27, 2021 at 9:59 IlJekoIlJeko 6533 silver badges1010 bronze badges 3

• 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 Commented Oct 27, 2021 at 10:00
• ok, but the method actually works, it's just ponents not updating. As soon as i force the update the array is populated correctly. Could this be caused by this line? – IlJeko Commented Oct 27, 2021 at 10:03
• It pushes the value into the array, but I wouldn't say it works as expected. It's not updating your ponent 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 Commented Oct 27, 2021 at 10:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

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

The React hook way to modify a state:

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

A little explanation:

1. 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.
2. It's remended 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.