React 18: How to Prevent Unnecessary Re-renders When Using Context API with useMemo
I've encountered a strange issue with I'm following best practices but This might be a silly question, but Quick question that's been bugging me - I'm working on a personal project and I'm facing an issue where my components are re-rendering more often than expected when using the Context API in React 18. I've set up a simple context to manage user authentication state, but even when the state doesn't change, components that consume this context seem to re-render. Here's a simplified version of my code: ```javascript import React, { createContext, useContext, useMemo, useState } from 'react'; const AuthContext = createContext(); export const AuthProvider = ({ children }) => { const [user, setUser] = useState(null); const value = useMemo(() => ({ user, setUser }), [user]); return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>; }; export const useAuth = () => useContext(AuthContext); const UserProfile = () => { const { user } = useAuth(); return <div>{user ? `Welcome, ${user.name}` : 'Please log in'}</div>; }; ``` I've wrapped my application in the `AuthProvider`, but when I update the user's state using `setUser`, I notice that the `UserProfile` component re-renders even if the `user` object reference remains the same. I'm using React 18, and I've tried wrapping my context value with `useMemo`, but it doesn't seem to help. The console.log statements I've added inside `UserProfile` confirm that the component is re-rendering unnecessarily. Additionally, I am aware that functional components using context will always re-render when the context value changes, but I thought `useMemo` would optimize this. However, I'm not sure what I'm missing. Any insights on how to properly prevent these unnecessary re-renders in this setup? I would really appreciate any help or guidance on best practices for using the Context API with `useMemo` in React 18. Am I missing something obvious? My development environment is Ubuntu. Any help would be greatly appreciated! What's the best practice here? The stack includes Javascript and several other technologies. Cheers for any assistance! My development environment is Linux. Is there a better approach?