How to use useEffect for a useState variable that has no dependency?

Question

I'm creating a React form that has stores new product list in a local state i.e.

const [listItem, setListItem] = useState([]);

I have submit handlers where I append new value like-

const handleAddProduct = (data) => {
  setListItem ([...listItem], data)
  console.log('ListItems-', listItem); // my console log doesn't update state but in react debugger tool I do see it's updated.
}

How can use a useEffect so that it always updates state? P.S. - data is not a local state, it's confined to a certain block.

Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — Janez Kuhar, Aug 25 '21 at 08:38

Tushar Shahi · Answer 1 · 2021-08-25T09:13:12.757

2

State updates are asynchronous and will not reflect immediately. Only in next cycle. That is why you can check in useEffect:

useEffect(() => {
console.log(listItem);
},[listItem]);

State is updating correctly.

Not related to the question but, if you are adding to array you might want to do this :

const handleAddProduct = (data) => {
setListItem ([...listItem, data]);
}

edited Aug 25 '21 at 09:13

answered Aug 25 '21 at 08:36

Tushar Shahi

16,452
1
18
39

thanks for the answer, but it shows me following error- React hook useEffect was passed a dependency list that is not an array literal. – Min Yoongi Aug 25 '21 at 09:01
Fixed that. 2nd param should be an array – Tushar Shahi Aug 25 '21 at 09:13

score 1 · Accepted Answer · answered Aug 25 '21 at 08:37

Due to Reactjs's update batching, you could not see your updated state within your event handler right after you updated it

If you want to see your value change, place it before the return function of your component:

Something like this:

const handleAddProduct = (data) => {
    setListItem ([...listItem], data)
}

console.log('ListItems-', listItem);

return (
);

How to use useEffect for a useState variable that has no dependency?

2 Answers2