#057Context Value Causes Unnecessary Re-renders
react.medREACT
1const AppContext = createContext();
2
3function AppProvider({ children }) {
4 const [user, setUser] = useState(null);
5 const [theme, setTheme] = useState('dark');
6
7 return (
8 <AppContext.Provider value={{ user, setUser, theme, setTheme }}>
9 {children}
10 </AppContext.Provider>
11 );
12}
13
14// A component that only uses theme still re-renders when user changes
no lines flagged
#057PracticeMedium22 min · 120 XP
Context Value Causes Unnecessary Re-renders
Every component consuming this context re-renders when any part of the context value changes, even if they only use one field.
Flagged lines
No lines flagged yet
What's wrong?
Flag a line or write a note to submit.