implementing React useEffect not triggering on state change in nested object
I'm converting an old project and I've looked through the documentation and I'm still confused about I'm working with an scenario where my `useEffect` isn't triggering as expected when a nested property of a state object changes. I'm working with React 17 and managing state with the `useState` hook. I have an object with a structure that includes a user profile, and I want to perform a side effect whenever the `email` field is updated. Here’s an example of my state and effect: ```javascript import React, { useState, useEffect } from 'react'; const UserProfile = () => { const [profile, setProfile] = useState({ name: 'John Doe', email: 'john@example.com', preferences: { newsletter: true, }, }); useEffect(() => { console.log('Email updated:', profile.email); // Imagine some API call here to notify email change }, [profile.email]); const changeEmail = (newEmail) => { setProfile((prev) => ({ ...prev, email: newEmail })); }; return ( <div> <h1>{profile.name}</h1> <p>{profile.email}</p> <button onClick={() => changeEmail('newemail@example.com')}>Change Email</button> </div> ); }; ``` The `useEffect` should ideally log the new email whenever I press the button, but it doesn’t seem to trigger. I’ve confirmed that `changeEmail` is being called correctly, and the state does update (I can see the new email reflected in the UI). However, the console log within `useEffect` doesn’t execute. I've also tried logging `profile` within the effect with `console.log(profile)` to see if it's getting the right object, but it remains static. Could the question be related to how I’m managing the state or how React handles `useEffect` dependencies? Any insights would be greatly appreciated! I want to understand if there's an scenario with my state update pattern or if there's something I've overlooked when using `useEffect`. This is part of a larger application I'm building. Thanks in advance! For reference, this is a production desktop app. Is this even possible?