React useEffect not triggering on dependency change due to shallow comparison
I'm confused about I'm learning this framework and I've looked through the documentation and I'm still confused about I'm working with an scenario where my `useEffect` hook in a React component isn't triggering when the dependency changes... I've double-checked that the dependency array includes the variable I want to watch, but it seems like React is using a shallow comparison, and it's not recognizing the change. Here's a simplified version of my code: ```javascript import React, { useEffect, useState } from 'react'; const MyComponent = () => { const [data, setData] = useState({ id: 1, name: 'Item 1' }); useEffect(() => { console.log('Data changed:', data); }, [data]); const updateData = () => { // This creates a new object, but with the same values setData({ id: 1, name: 'Item 1' }); }; return <button onClick={updateData}>Update Data</button>; }; export default MyComponent; ``` When I click the button, I expect the `useEffect` to log 'Data changed: { id: 1, name: 'Item 1' }', but it doesn't seem to fire at all. I thought that creating a new object would trigger the re-render and consequently the `useEffect`, but it appears that React is treating the object as the same because the values are identical. I've tried using a `useRef` to hold the previous state and comparing it manually, but that feels a bit hacky. Is there a cleaner way to handle this scenario, or should I be using a different approach to force `useEffect` to recognize changes in the object? Any insights or workarounds would be appreciated! Also, I'm using React version 17.0.2. How would you solve this? This is for a service running on macOS. Thanks for taking the time to read this! I'm open to any suggestions.