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

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?

Answer

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