Q283: What's a common pitfall when using useContext with objects? - React & Modern Frontend (445 Qs)

A common pitfall when using useContext with objects is triggering unnecessary re-renders across all consuming components — even when only part of the context value changes.

When you provide an object as the context value, React compares the entire object reference. If the object changes (even slightly), React assumes the whole context has changed, and all components using useContext(MyContext) will re-render, regardless of whether they use the part that changed.

Example:

 const MyContext = React.createContext();

 function MyProvider({ children }) {
   const [user, setUser] = useState(null);
   const [theme, setTheme] = useState('light');

   // This causes all consumers to re-render on any state change
   const contextValue = { user, setUser, theme, setTheme };

   return (
     <MyContext.Provider value={contextValue}>
       {children}
     </MyContext.Provider>
   );
 }

In this case, a change in theme will also trigger a re-render in components that only care about user.

This issue can be fixed in two ways,

1. Split Contexts
Create separate contexts for unrelated pieces of state:

jsx

const UserContext = React.createContext(); 
const ThemeContext = React.createContext();

2. Memoize Context Value
Use useMemo to prevent unnecessary re-renders:

jsx

const contextValue = useMemo(() => ({ user, setUser, theme, setTheme }), [user, theme]);

However, this only helps if the object structure and dependencies are well controlled.