ReactJS - How to handle context updates without causing multiple re-renders in child components?
I'm not sure how to approach Hey everyone, I'm running into an issue that's driving me crazy. I'm facing an issue with React context updates leading to multiple re-renders of child components, even when only specific values are updated. I'm using React 17 and have a context provider that looks like this: ```javascript import React, { createContext, useState } from 'react'; const AppContext = createContext(); const AppProvider = ({ children }) => { const [user, setUser] = useState({ name: 'John', age: 30 }); const [settings, setSettings] = useState({ theme: 'light', language: 'en' }); const updateUser = (newUser) => { setUser(prevUser => ({ ...prevUser, ...newUser })); }; const updateSettings = (newSettings) => { setSettings(prevSettings => ({ ...prevSettings, ...newSettings })); }; return ( <AppContext.Provider value={{ user, settings, updateUser, updateSettings }}> {children} </AppContext.Provider> ); }; export { AppContext, AppProvider }; ``` In my child component, I consume the context like this: ```javascript import React, { useContext } from 'react'; import { AppContext } from './AppProvider'; const UserProfile = () => { const { user } = useContext(AppContext); console.log('Rendering UserProfile'); return <div>{user.name}</div>; }; export default UserProfile; ``` However, whenever I update the settings (using `updateSettings`), the `UserProfile` component re-renders, even though it's not using any settings-related data. I've tried using `React.memo` on `UserProfile`, but it doesn't seem to help. The console log still indicates that the component renders unnecessarily. Is there a way to prevent `UserProfile` from re-rendering when only `settings` are updated? I'm looking for solutions that adhere to best practices in React and potentially using hooks or context effectively without causing performance issues. This is part of a larger application I'm building. I'm using Javascript latest in this project. Am I approaching this the right way?