useEffect hook depend on object/array

Question

useEffect working pretty well with primitives, but then I need it to run when array value changes, e.g. I have props.items, then I load items but some ids are different. I tried to use it like this:

useEffect(() => {
}, [...props.items.map((i) => i.id)])

but this solution throws error from react, saying dependency array must not change between calls. Anyone managed to find solid workaround for this situation? Thanks in advance.

"I need it to run when array value changes" [props.items] should work if you update the array correctly (i.e. create a new instance when you add,remove or change items). If you are not doing that then you should do it. — Felix Kling
– Felix Kling, Commented Nov 19, 2019 at 11:30
You don't need to map inside the dependency array. useEffect(() => { }, [props.items]) should be fine. The props.items don't need to be an array as well. If the reference of props.items changes, the hook will be triggered. — Vishnu
– Vishnu, Commented Nov 19, 2019 at 11:34
Thanks @FelixKling and Vishnu for clarification. It was bugging me for quite some time. — Ivan Cherviakov
– Ivan Cherviakov, Commented Nov 19, 2019 at 11:49
Also, with @FelixKling approach, you're preventing a map over the items when it's not necessary. — Ulisses Caon
– Ulisses Caon, Commented Nov 19, 2019 at 12:51

JozeV · Accepted Answer · 2019-11-19 12:34:10Z

2

// don't
useEffect(() => {
}, [...props.items.map((i) => i.id)]) // this makes new array with spread operator (...), and then returns another one with .map method

// do
useEffect(() => {
}, [props.items]) // this just points to an existing array we want to watch for changes

answered Nov 19, 2019 at 12:34

JozeV

6964 gold badges14 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

useEffect hook depend on object/array

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related