title: useEffect React Hook: detecting the change of a property for each object in an array
body: <p>StackOverflow,</p>
  <p>I'm having a question about <a href="https://reactjs.org/docs/hooks-intro.html" rel="nofollow noreferrer">React Hooks</a>, more particularly, <code>useEffect</code> hook. I'm aware that one use case of <code>useEffect</code> hook is to capture changes of certain state variables.</p>
  <p>Let's suppose we have the following code:</p>
  <pre><code>const MyComponent = () =&gt; {
    const [sv, setSv] = useState([
      {
        a: 1,
        b: { c: 'val11', d: 'val12', e: 'val13' }
      },
      {
        a: 8,
        b: { c: 'val21', d: 'val22', e: 'val23' }
      },
      {
        a: 19,
        b: { c: 'val31', d: 'val32', e: 'val33' }
      }
    ]);
  
    const someCallback = useCallback(() =&gt; {
      console.log('change triggered!')
    });
  
    useEffect(someCallback, [sv]);
  }
  </code></pre>
  <p>Let's also assume <code>sv</code> is an array of objects, each of which has the same set of keys, but different values associated with these keys.</p>
  <p>It works just fine if I want to execute <code>someCallback</code> on <strong>any</strong> changes made to <code>sv</code>, including objects nested in each object contained by the array <code>sv</code>.</p>
  <p>Now let's assume that there is a need to execute <code>someCallback</code> only when certain properties of each object in the array <code>sv</code> will change. For example, I'll want to only monitor changes to <code>b.c</code> and <code>b.d</code>. The way I thought would work is:</p>
  <pre><code>useEffect(someCallback, [sv.map(item =&gt; item.b.c), sv.map(item =&gt; item.b.d)]);
  </code></pre>
  <p>However, it didn't trigger at all. This probably because <code>Array.map</code> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" rel="nofollow noreferrer">creates a new array with no reference to the previous one</a>, however, I can't think of any other way to map the necessary values.</p>
  <p>Any help is greatly appreciated.</p>
  <p>Thanks!</p>