Q11: How does the React Context API work and how do you prevent Context render thrashing?

Context provides a mechanism to pass data through the component tree without manually passing props at every level ('prop drilling'). However, whenever a Context Provider value object updates, all consuming components re-render. To avoid render thrashing, split contexts by domain or memoize provider values with useMemo.

Memoizing Context Provider Values

function UserProvider({ children }) {
  const [user, setUser] = useState(null);

  // Memoize value to prevent consumer re-renders when parent re-renders
  const contextValue = useMemo(() => ({ user, setUser }), [user]);

  return (
    <UserContext.Provider value={contextValue}>
      {children}
    </UserContext.Provider>
  );
}

💡 useMemo ensures contextValue maintains reference equality unless user state explicitly updates.

Key Takeaways

Eliminates deep prop drilling across component hierarchies.
Unmemoized value objects (value={{ state, dispatch }}) create fresh references every render, forcing consumers to re-render.

Knowledge Check

What causes all components calling useContext(MyContext) to re-render?

Q11: How does the React Context API work and how do you prevent Context render thrashing?

STAY UPDATED WITH BYTES!