React useEffect dependency array implementation guide as expected with nested state
I'm sure I'm missing something obvious here, but I've been struggling with this for a few days now and could really use some help. I'm working with an scenario with the `useEffect` hook in a React application where the dependency array does not seem to trigger a re-render as expected when using nested state. I'm using React 17.0.2 and managing the state with `useState` for an object that contains several nested properties. Here's a simplified version of my code: ```javascript import React, { useState, useEffect } from 'react'; const MyComponent = () => { const [data, setData] = useState({ count: 0, name: 'Initial' }); useEffect(() => { console.log('Data changed:', data); }, [data.name]); // Dependency array only on `data.name` const handleClick = () => { setData(prev => ({ ...prev, count: prev.count + 1 })); // Updating count }; return ( <div> <h1>{data.name}</h1> <p>Count: {data.count}</p> <button onClick={handleClick}>Increment Count</button> </div> ); }; export default MyComponent; ``` The question is that when I click the button to increment the count, the `console.log` in `useEffect` does not fire because the dependency array only monitors `data.name`. I expected it to trigger whenever `data` changes, regardless of which property is modified. I also tried adding `data` as a dependency, but it caused the effect to trigger too often due to shallow comparison, leading to an infinite loop. Is there a better approach to handle this, or should I reconsider how I'm structuring my state? Any insights would be greatly appreciated! This is part of a larger web app I'm building. Am I missing something obvious?