51 items
React.memo Won't Stop Context Re-renders
Code QuizNesting and Overriding Providers
Slides / VideoCustom Consumer Hook for Context
Slides / VideoCreating a Custom Provider Component
Slides / VideoContext with useReducer
Slides / VideoMemoizing Context Provider Values
Slides / VideoSplitting Contexts to Minimize Re-renders
Slides / VideoProviding Context Values with Provider
Slides / VideoCreating Context with createContext
Slides / VideoThe Prop Drilling Problem
Slides / VideoRe-rendering of Context Consumers
Slides / VideoDefault Values in createContext
Slides / VideoPassing Updaters Through Context
Code QuizUpdating Context via State
Code QuizContext.Consumer Render Prop
Code QuizNested Providers and Shadowing
Code QuizReading Context Outside the Provider
Code QuizDefault Value Without a Provider
Code QuizProviding a Context Value
Code QuizCreating a Context
Code QuizInverted Guard in Custom Context Hook
Code QuizSwapped State and Dispatch Contexts
Code QuizReducer Missing Default Case
Code QuizInline Context Value Re-renders
Code QuizContext.Consumer Render Prop
QuizMemoizing Context Value
QuizContext Value Identity Pitfall
QuizOverriding Context Values
QuizNested and Multiple Providers
QuizContext with useReducer
QuizSplitting Contexts
QuizProviding Context Values
QuizCreating a Context
QuizdisplayName for DevTools
QuizWhen to Use Context
QuizDefault Value in createContext
QuizContext Re-render Behavior
QuizCustom Hook for Context
QuizContext Limitations
FlashcardDefault Value in createContext
FlashcardRe-render on Value Change
FlashcardThe value Prop
FlashcardProviding a Context
FlashcardMemoizing Context Value
FlashcardSplitting Contexts
FlashcardCreating a Context
FlashcardCustom useContext Hook
FlashcardContext.Consumer Render Prop
FlashcardContext with useReducer
FlashcardContext displayName
FlashcardNesting and Overriding Providers
FlashcardReact.memo Won't Stop Context Re-renders
React.memo only compares props, so a context consumer still re-renders when the context value changes.
const ThemeContext = createContext();
function App() {
const [count, setCount] = useState(0);
return (
<ThemeContext.Provider value={{ color: 'blue' }}>
<button onClick={() => setCount(count + 1)}>Clicked {count}</button>
<Label />
</ThemeContext.Provider>
);
}
// Wrapped in memo hoping to skip re-renders since Label takes no props
const Label = React.memo(function Label() {
const theme = useContext(ThemeContext);
console.log('Label render');
return <span style={{ color: theme.color }}>Hello</span>;
});The developer wrapped Label in React.memo expecting it to skip re-renders, but Label still logs on every button click. Why, and how do you fix it?