Code QuizIntermediate

React.memo Won't Stop Context Re-renders

Name: React.memo Won't Stop Context Re-renders (Fix It With useMemo) #Shorts
Uploaded: 2026-08-24T01:23:47.908+00:00
Description: React.memo only compares props, so a context consumer still re-renders when the context value changes.

React.memo only compares props, so a context consumer still re-renders when the context value changes.

Codejavascript

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?

Watch the code walkthrough

Watch on YouTube →

← PreviousRe-rendering Behavior of Context Consumers Next →Nesting and Overriding Providers