useContext Hook

useContext = access context without prop drilling

---

What is useContext?

"Hook to consume context"

useContext is a React Hook that lets you read and subscribe to context in function components.

"useContext is a React Hook that allows function components to consume context values, eliminating the need for prop drilling."

---

Basic Usage

CreateContext + Provider + useContext

// Create context
const ThemeContext = createContext("light");

// Provide value
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Component />
    </ThemeContext.Provider>
  );
}

// Consume value
function Component() {
  const theme = useContext(ThemeContext);
  return <div>Theme: {theme}</div>;
}

"useContext requires creating context with createContext, providing value with Provider, and consuming with useContext."

---

Multiple Contexts

Use multiple useContext calls

const theme = useContext(ThemeContext);
const user = useContext(UserContext);
const language = useContext(LanguageContext);

"Components can consume multiple contexts by calling useContext multiple times."

---

Context Default Value

Default when no Provider

const ThemeContext = createContext("light"); // Default value

function Component() {
  const theme = useContext(ThemeContext);
  // Uses 'light' if no Provider above
}

"Context default value is used when useContext is called outside a Provider."

---

When to Use Context

Shared data across many components

Use Context for:

• Theme (light/dark)
• User authentication
• Language/locale
• Global state shared by many components

"Use Context for data shared across many components, like theme, user, or language settings."

---

When NOT to Use Context

Avoid for frequently changing data

Don't use for:

• Frequently changing values (causes re-renders)
• Data only needed by few components
• Simple parent-child communication (use props)

"Avoid Context for frequently changing data or simple parent-child communication - use props or state management instead."

---

Context Performance

Provider value change = all consumers re-render

// ❌ Bad - new object every render
<Context.Provider value={{ theme: 'dark' }}>

// ✅ Good - stable reference
const value = useMemo(() => ({ theme: 'dark' }), []);
<Context.Provider value={value}>

"Context value changes cause all consumers to re-render, so keep values stable with useMemo or separate contexts."

---

Splitting Contexts

Separate contexts by concern

// Instead of one large context
const AppContext = createContext({ theme, user, language });

// Split into multiple
const ThemeContext = createContext();
const UserContext = createContext();
const LanguageContext = createContext();

"Split contexts by concern to prevent unnecessary re-renders when unrelated values change."

---

9️⃣ Custom Hook Pattern

Wrap useContext in custom hook

function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error("useTheme must be used within ThemeProvider");
  }
  return context;
}

Provides better error handling and API.

"Wrapping useContext in a custom hook provides better error handling and a cleaner API."

---

Context vs Props

Context = many levels, Props = direct children

Use Case	Solution
Direct parent-child	Props
Many component levels	Context
Frequently changing	State management
Simple data	Props

"Use Context for data needed across many levels, props for direct parent-child communication."

---

"useContext is a React Hook that consumes context values, eliminating prop drilling. It requires createContext, Provider, and useContext. Use for shared data like theme or user, but avoid for frequently changing data. Keep context values stable to prevent unnecessary re-renders. Split contexts by concern and consider custom hooks for better APIs."

---

🧠 Ultra-Short Cheat Sheet

Consume context values
createContext + Provider + useContext
Eliminates prop drilling
Avoid for frequent changes
Split contexts by concern
Custom hooks pattern
Stable values