ReactJS - useMemo not preventing unnecessary re-calculations of derived state in nested component
I'm migrating some code and I'm having trouble with I'm facing an issue where I'm using `useMemo` to compute a derived state in a nested component, but it seems to be recalculating on every render, even though I think I have the dependencies set correctly. I'm using React 18.0.0. Here's a simplified version of my code: ```javascript import React, { useState, useMemo } from 'react'; const ParentComponent = () => { const [count, setCount] = useState(0); const increment = () => setCount(c => c + 1); return ( <div> <button onClick={increment}>Increment</button> <NestedComponent count={count} /> </div> ); }; const NestedComponent = React.memo(({ count }) => { const derivedValue = useMemo(() => { console.log('Calculating derived value'); return count * 2; }, [count]); return <div>Derived Value: {derivedValue}</div>; }); export default ParentComponent; ``` Even though I'm logging the calculation, it seems like `Derived Value: {derivedValue}` updates every time I click the increment button causing 'Calculating derived value' to log in the console each time. I expected `useMemo` to memoize the value and only recalculate when `count` changes. I've double-checked the dependencies in the `useMemo`, and the console log suggests that it's recalculating unnecessarily. Is there something I might be missing here? Could it be related to the way React handles memoization in nested components, or is there a better way to manage derived state for performance? Any insights would be greatly appreciated! Thanks for taking the time to read this! Any pointers in the right direction? Any advice would be much appreciated.