ReactJS useEffect not triggering on prop update when using memoization
I'm updating my dependencies and I need help solving I'm stuck on something that should probably be simple... I'm facing an issue where my `useEffect` hook isn't triggering when a prop is updated, even though I've set it up to react to changes properly. I'm using React 17.0.2 and have a parent component that passes props to a memoized child component, which looks something like this: ```jsx import React, { useEffect, memo } from 'react'; const ChildComponent = memo(({ data }) => { useEffect(() => { console.log('Data changed:', data); // Perform some operation }, [data]); return <div>{data}</div>; }); const ParentComponent = () => { const [state, setState] = React.useState('Initial data'); const handleChange = () => { setState('Updated data'); }; return ( <div> <ChildComponent data={state} /> <button onClick={handleChange}>Update Data</button> </div> ); }; export default ParentComponent; ``` When I click the button to update the data, I expect to see 'Data changed: Updated data' in the console, but it doesn't log anything, and the effect doesn't run. I’ve tried removing `memo`, and it works as expected. However, I want to keep the memoization for performance reasons. I’ve also checked that the `data` prop is indeed changing by logging it directly in the render method of `ChildComponent`, and it shows the updated value. Are there any specific reasons why `useEffect` with memoization might not trigger on prop updates? Is there a better approach to ensure that the effect runs when the prop changes, or should I consider another pattern? I'd really appreciate any guidance on this.