How to use useEffect hook with the dependency list as a specific field in an array of objects?

Question

Let's say I have an array like this:

[
  {
    country: '',
    'city/province': '',
    street: ''
  },
  {
    country: '',
    'city/province': '',
    street: ''
  }
]

How do I have the useEffect() hook run every time the value of the 'country' field in any item inside the array changes?

Do you need like this? https://codesandbox.io/s/react-hooks-useeffect-forked-1ow31 — Maniraj Murugan, Nov 18 '21 at 13:49
I think that is close @ManirajMurugan - but wouldn't it trigger useEffect if street changes too? — Chris, Nov 18 '21 at 13:54
Interesting problem, personally I would go with trying to explicitly invoke the code than needs to run when you change an address, say from a `onChangeAddress` function, rather than trying to _react_ to deep state changes using `useEffect` — andy mccullough, Nov 18 '21 at 14:16

windmaomao · Answer 1 · 2021-11-18T16:30:08.717

Normally you wouldn't want to do that, but just to answer your question, it can be done, so let me propose the following assuming your list is called items:

  useEffect(() => {
    
  }, [...items.map(v => v.country)])

What the above code does is to spread all items (with its country property) into the useEffect dependency array.

The reason why this can be adhoc is mainly because React doesn't like to have a variable length of dependency. In the source code, when the length changes, it only appreciates the element change from the existing elements. So you might run into problem if you switch from 1 elements to 2 elements.

However if you have fixed number of elements, this should do what you wanted. Keep in mind the items has to be an array at all time.

NOTE: to accommodate the length issue, maybe we can add an additional variable length to the dependency array :)

  }, [items.length, ...items.map(v => v.country)])

As i mentioned, most of time, you should avoid doing this, instead try to change the entire items every time when an item changes. And let the Item display to optimize, such as React.memo.

"Normally you wouldn't want to do that" - I agree. It equally applies to my answer. Your approach is interesting, and it works, I just never thought of it like that. — Chris, Nov 20 '21 at 09:54

score 0 · Accepted Answer · answered Nov 18 '21 at 14:05

I don't think you can specifically tackle it in the dependency array, however, you can do your check inside the useEffect to have the same overall outcome.

Basically, the dependency array is passed the full data state, which will trigger the effect every change, then you do a further check if the sub property has changed.

I'm leverage lodash for brevity, but you can run any function to determine if the data has changed.

Codepen: https://codepen.io/chrisk7777/pen/mdMvpvo?editors=0010

const { useState, useEffect, useRef } = React;
const { render } = ReactDOM;
const { isEqual, map } = _;

const App = () => {
  const [data, setData] = useState([
    {
      country: "",
      "city/province": "",
      street: ""
    },
    {
      country: "",
      "city/province": "",
      street: ""
    }
  ]);
  const prevData = useRef(data);

  // hacky updates just to demonstrate the change
  // change country - should trigger useEffect
  const update1 = () => {
    setData((s) => [s[0], { ...s[1], country: s[1].country + "a" }]);
  };

  // change street - should not trigger useEffect
  const update2 = () => {
    setData((s) => [s[0], { ...s[1], street: s[1].street + "a" }]);
  };

  useEffect(() => {
    if (!isEqual(map(prevData.current, "country"), map(data, "country"))) {
      console.log("country changed");
    }

    prevData.current = data;
  }, [data]);

  return (
    <div>
      <button onClick={update1}>change country - trigger effect</button>
      <br />
      <button onClick={update2}>change street - do not trigger effect</button>
    </div>
  );
};

render(<App />, document.getElementById("app"));

just curious, would this also run if you were to add or remove an item from the array too? — andy mccullough, Nov 18 '21 at 14:15
It would. The isEqual line would then need to determine what is equal (length, attribute change, etc) — Chris, Nov 18 '21 at 14:16
I just saw your comment on the question. I agree - personally I would do the same — Chris, Nov 18 '21 at 14:41
I wonder if there is some way to determine which item in the array changed its value? — , Nov 18 '21 at 16:58
@AnhNguyenQuy yep you have access to the previous data, so you can use something like "diff" from lodash. What you consider as changed will depend on your app (ie deleted, added, or just modified). But you have everything you need on the isEqual line — Chris, Nov 19 '21 at 00:13

score 0 · Answer 3 · answered Nov 18 '21 at 14:23

0

Just map the countries into the effect dependency array.

const countries = data.map((x) => x.country);

useEffect(() => {
  console.log(countries);
}, countries);

answered Nov 18 '21 at 14:23

Brenden

1,947
1
12
10

How to use useEffect hook with the dependency list as a specific field in an array of objects?

3 Answers3