React useEffect detect changes in an array inside the object

Question

I am trying to recall an API based on a state change, using useEffect hook. However, my useEffect can't detect changes made to the 'type' array. I tried using use-deep-compare-effect library, but it also couldn't detect a change.

How I can detect changes to my state?

Any help would be very much appreciated!

const [values, setValues] = useState({
        query: '',
        type: ["Tender & Auction", "Merger & Acquisition","Policy & Regulation", "Project Update", "Other"]
    })

 /// Re-run a query, after we check a filter
    useEffect(() => {
          searchAPI(values);
      }, [values]);

I am changing the values like this:

 const handleChange = (newValues) => {
        console.log(newValues)
        setValues({ ...values, type: newValues})
   };

Thanks @sojin, added the changes logic, I can see that state changed in my console. — Cassiopea
– Cassiopea, Commented Nov 2, 2021 at 12:58

SoGoddamnUgly · Accepted Answer · 2021-11-02 13:06:34Z

4

This is a simple way of doing comparison without causing an infinite loop:

useEffect(() => {
    searchAPI(values);
}, [JSON.stringify(values)]);

or if you only need to track type property:

useEffect(() => {
    searchAPI(values);
}, [JSON.stringify(values.type)]);

edited Nov 2, 2021 at 13:06

answered Nov 2, 2021 at 12:46

SoGoddamnUgly

7764 silver badges10 bronze badges

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

4 Comments

Cassiopea Over a year ago

Thank you @SoGoddamnUgly, I've used JSON.stringify(values.type) and it worked!

Long Nguyen Duc Over a year ago

Please, never go with this way. It’s an anti pattern.

Cassiopea Over a year ago

@LongNguyen what should I use instead?

Long Nguyen Duc Over a year ago

Did you try with sojin solution? Can you add the way you call handle change to get more help?

Woohaik · Accepted Answer · 2021-11-02 13:08:00Z

1

Specifying the scope

useEffect(() => {
    searchAPI(values);
}, [values,values.type]);

answered Nov 2, 2021 at 13:08

Woohaik

1,3542 gold badges11 silver badges28 bronze badges

Collectives™ on Stack Overflow

React useEffect detect changes in an array inside the object

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related