Unexpected re-renders in React 18 when using memoized context values with useContext
I'm facing an issue with unnecessary re-renders in my React 18 application when using context. I've set up a context provider that uses `useMemo` to memoize its values, but it still seems to trigger re-renders in consumer components that shouldn't be affected by changes in the context state. Here's a simplified version of what I have: ```javascript import React, { createContext, useState, useMemo, useContext } from 'react'; const MyContext = createContext(); const MyProvider = ({ children }) => { const [value, setValue] = useState(0); const contextValue = useMemo(() => ({ value, setValue }), [value]); return <MyContext.Provider value={contextValue}>{children}</MyContext.Provider>; }; const MyComponent = () => { const { value, setValue } = useContext(MyContext); console.log('Rendering MyComponent with value:', value); return ( <div> <p>Current Value: {value}</p> <button onClick={() => setValue(value + 1)}>Increment</button> </div> ); }; const AnotherComponent = () => { console.log('Rendering AnotherComponent'); return <div>I'm another component!</div>; }; const App = () => ( <MyProvider> <MyComponent /> <AnotherComponent /> </MyProvider> ); export default App; ``` I expect `AnotherComponent` not to re-render when `MyComponent` updates the context state. However, I see that `AnotherComponent` is also re-rendering every time I click the increment button. I’ve checked that `useMemo` is working correctly by logging the `contextValue`, and it doesn't change unless the `value` changes. I also tried using `React.memo` on `AnotherComponent`, but that didn't seem to help either. I even verified that the state updates and context value are as expected. My React version is 18.0.0. Is there something I'm missing here regarding context usage or memoization? What steps can I take to prevent unnecessary renders in this scenario?