React useEffect doesn't trigger when array in an object state changes

Question

The scenario is that there is an object state with an array in it. I want useEffect to be executed when values are added or changed in it. I tried a few solutions but none of them worked.

       const [filter, setFilter] = useState({})
       const firstUpdate = useRef(true);

    useEffect(() => {
    
        console.log("Filter Updated")
        if (firstUpdate.current) return firstUpdate.current = false;
          
        // API  Calls Here
        
      }, [filter])


const handler = (categoryName, categoryId) => {
    let x = filter;
    x.categoryIDs = [categoryId];
    setFilter(x)
    
  }

I believe what you want is to set dependecy as `[filter.categoryIDs]` rather than `[filter]` — Ethan Doh, Apr 06 '22 at 19:22
@EthanDoh I tried that as well didn't work, also I don't think this will be ideal for my use case since I will have a large number of arrays in this state. — Faqahat Fareed, Apr 06 '22 at 19:23
Yeah, for cases like that, I do create a new state for the array. — Ethan Doh, Apr 06 '22 at 19:56
[Why can't I directly modify a component's state, really?](https://stackoverflow.com/q/37755997/1218980) — Emile Bergeron, Apr 06 '22 at 20:05

score -1 · Answer 1 · answered Apr 06 '22 at 19:18

-1

React compares by reference. You simply modify a property of an object and use that in the new state, this wont work.

Try setFilter({...x}).

answered Apr 06 '22 at 19:18

Istvan Tabanyi

634
3
8

2

This works but it just hides the state mutation. Instead you should just not mutate state. – Brian Thompson Apr 06 '22 at 19:19
[Why can't I directly modify a component's state, really?](https://stackoverflow.com/q/37755997/1218980) – Emile Bergeron Apr 06 '22 at 20:05

React useEffect doesn't trigger when array in an object state changes

1 Answers1