Black BeltcontextlockPREMIUM

React Context Causes All Consumers to Re-render on Every Value Change

A provider bundles multiple pieces of state into one context value object.

REACT_MODULE // 0x42

const AppContext = createContext();
function AppProvider({ children }) {
const [user, setUser] = useState({ name: 'Ada' });
const [theme, setTheme] = useState('dark');
return (
<AppContext.Provider value={{ user, theme, setUser, setTheme }}>
{children}
</AppContext.Provider>
);
}
function ThemeToggle() {
const { theme, setTheme } = useContext(AppContext);
return <button onClick={() => setTheme(t => t === 'dark' ? 'light' : 'dark')}>{theme}</button>;
}
function UserBadge() {
const { user } = useContext(AppContext);
return <span>{user.name}</span>;
}

When setTheme fires, what happens to UserBadge, which only reads user?

lock

This Drill is Locked

This is a premium drill. Continue on to the next free drill in the sequence.

CONTINUE DRILLarrow_forward