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

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?

CodePudding user response：

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"));

CodePudding user response：

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.

CodePudding user response：

Just map the countries into the effect dependency array.

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

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