React · Hooks (Comprehensive)

useContext Hook

Master useContext for sharing data across components without prop drilling - the essential solution for global state management in React applications.

Find videos you like?

Save to resource drawer for future reference!

What is useContext?

The solution to prop drilling hell

useContext is a Hook that lets you subscribe to React context without introducing nesting. It's the solution to the "prop drilling" problem where you need to pass data through many levels of components.

Basic Syntax

const value = useContext(MyContext);

MyContext:The context object you want to read from

value:The current context value

When to Use?

Use useContext when you need to share data between components that are far apart in the component tree, like user authentication, theme settings, or language preferences!

The Problem: Prop Drilling Hell

Why we need useContext

Prop Drilling Pain

Without context, you must pass props through every intermediate component, even if they don't use them. This creates maintenance nightmares!

🚨 Before useContext (Prop Drilling)

// ❌ Painful prop drilling

function App() {}

const [user, setUser] = useState({} name: 'John' }));

return <Header user={user} />;

}

function Header({} user }) {}

return <Navigation user={user} />; // Just passing through!

}

function Navigation({} user }) {}

return <UserMenu user={user} />; // Still just passing!

}

function UserMenu({} user }) {}

return <span>Hello, {user.name}</span>; // Finally using it!

}

•Header and Navigation don't need user data, but must accept and pass it

•Adding a new level means updating ALL intermediate components

•Hard to track where data comes from and where it goes

•Components become tightly coupled to props they don't use

✅ After useContext (Clean & Simple)

// ✅ Clean with useContext

const UserContext = createContext();

function App() {}

const [user, setUser] = useState({} name: 'John' }));

return (

<UserContext.Provider value={user}>

</UserContext.Provider>

);

}

function Header() {}

return <Navigation />; // No props needed!

}

function UserMenu() {}

const user = useContext(UserContext); // Direct access!

return <span>Hello, {user.name}</span>;

}

•Intermediate components don't need to know about user data

•Add/remove components without touching prop chains

•Clear separation between data providers and consumers

•Components only access data they actually need

Step-by-Step Guide

Learn useContext progressively

Step 1: Create Context

First, create a context object using createContext(). Think of it as creating a special container for sharing data across components.

//Create a context with default value

const UserContext = createContext(null);

//Or with a more descriptive default

const ThemeContext = createContext('light');

Pro Tip

The default value is only used when a component tries to consume context without being wrapped in a Provider. Use meaningful defaults!

Step 2: Provide Context Value

Wrap components with Context.Provider and pass the value. This makes the data available to all child components!

function App() {}

const [user, setUser] = useState({} name: 'John' }));

return (

<UserContext.Provider value={}user}>

{} All child components can now access user

</UserContext.Provider>

);

};

Key Point

The Provider's value prop can be anything - object, string, number, function, or even another component!

Step 3: Consume Context

Use useContext Hook to access the context value. This is how child components can read the shared data!

function UserProfile() {}

const user = useContext(UserContext);

if (!user) {}

return <div>Please log in</div>;

})

return <div>Welcome, {}user.name}!</div>;

};

Important

useContext returns the context value for the context you pass. Make sure you're using the same context object you created!

Step 4: Update Context Value

Context updates automatically when the Provider's value changes. All consuming components will re-render with the new value!

function App() {}

const [user, setUser] = useState(null);

const login = (userData) => {}

setUser(userData);

});

return (

<UserContext.Provider value={}{} user, login })>

</UserContext.Provider>

);

};

Performance Note

When the Provider's value changes, ALL components using that context will re-render. Keep values stable when possible!

Step 5: Create Custom Hooks

Create custom hooks for cleaner code reuse and better error handling. This encapsulates context logic!

//Custom hook for user context

function useUser() {}

const context = useContext(UserContext);

if (!context) {}

throw new Error('useUser must be used within UserProvider');

})

return context;

};

//Usage in components

function UserProfile() {}

const {} user, login }) = useUser();

return <div>Welcome, {}user.name}</div>;

};

Best Practice

Custom hooks provide type safety, error handling, and a cleaner API for your context!

Real-World Examples

Practical useContext patterns

Theme Switcher

Global theme management with context

Frontend

// Theme Context
const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = React.useState('light');
  
  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };
  
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

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

// Components using the theme
function Header() {
  const { theme, toggleTheme } = useTheme();
  
  return (
    <header className={`header header-${theme}`}>
      <h1>My App</h1>
      <button onClick={toggleTheme}>
        Switch to {theme === 'light' ? 'Dark' : 'Light'} Mode
      </button>
    </header>
  );
}

function Content() {
  const { theme } = useTheme();
  
  return (
    <main className={`content content-${theme}`}>
      <h2>Welcome to {theme === 'light' ? 'Light' : 'Dark'} Mode!</h2>
      <p>This content adapts to the current theme.</p>
    </main>
  );
}

function App() {
  return (
    <ThemeProvider>
      <div className="app">
        <Header />
        <Content />
      </div>
    </ThemeProvider>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Live Preview

Loading preview...

User Authentication

Global user state with context

Frontend

// Auth Context
const AuthContext = createContext();

function AuthProvider({ children }) {
  const [user, setUser] = React.useState(null);
  const [isLoading, setIsLoading] = React.useState(false);
  
  const login = async (email, password) => {
    setIsLoading(true);
    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1000));
      const userData = { id: 1, name: 'John Doe', email };
      setUser(userData);
    } catch (error) {
      console.error('Login failed:', error);
    } finally {
      setIsLoading(false);
    }
  };
  
  const logout = () => {
    setUser(null);
  };
  
  const value = {
    user,
    isLoading,
    login,
    logout
  };
  
  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
}

function useAuth() {
  const context = React.useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within AuthProvider');
  }
  return context;
}

// Components using auth
function LoginForm() {
  const { login, isLoading } = useAuth();
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  
  const handleSubmit = (e) => {
    e.preventDefault();
    login(email, password);
  };
  
  return (
    <form onSubmit={handleSubmit} className="login-form">
      <h2>Login</h2>
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        required
      />
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Logging in...' : 'Login'}
      </button>
    </form>
  );
}

function UserProfile() {
  const { user, logout } = useAuth();
  
  return (
    <div className="user-profile">
      <h2>Welcome, {user.name}!</h2>
      <p>Email: {user.email}</p>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

function AppContent() {
  const { user } = useAuth();
  
  return (
    <div className="app">
      <header className="header">
        <h1>My App</h1>
      </header>
      <main className="main">
        {user ? <UserProfile /> : <LoginForm />}
      </main>
    </div>
  );
}

function App() {
  return (
    <AuthProvider>
      <AppContent />
    </AuthProvider>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Live Preview

Loading preview...

Common Mistakes & Solutions

Avoid these useContext pitfalls

🚨 Mistake 1: Forgetting to Wrap with Provider

// ❌ This will return undefined or default value

function MyComponent() {}

const user = useContext(UserContext); // undefined!

return <div>{user.name}</div>; // Error!

}

✅ Solution:

Always wrap components that use context with the appropriate Provider. Create a wrapper component if needed.

🚨 Mistake 2: Creating Context Inside Component

// ❌ New context on every render!

function BadComponent() {}

const UserContext = createContext(); // New context!

const user = useContext(UserContext);

return <div>{user.name}</div>;

}

✅ Solution:

Create context objects outside components, at module level. This ensures all components use the same context instance.

🚨 Mistake 3: Unnecessary Re-renders

// ❌ Object created on every render

function App() {}

return (

<UserContext.Provider value={} user: user, theme: theme })>

</UserContext.Provider>

);

}

✅ Solution:

Use useMemo to stabilize context values when they contain objects or functions to prevent unnecessary re-renders.

🚨 Mistake 4: Using Context for Everything

// ❌ Overusing context for local state

const FormInputContext = createContext();

const ButtonColorContext = createContext();

const LoadingContext = createContext();

// Too many contexts!

✅ Solution:

Use context for truly global state. For component-specific state, use props or component composition.

Key Takeaways

Remember these important points

Avoid Prop Drilling

Context eliminates the need to pass props through multiple component levels.

Global State Solution

Perfect for user authentication, themes, and settings needed app-wide.

Custom Hooks

Create custom hooks for cleaner, type-safe context access with error handling.

Performance Matters

Use useMemo to stabilize context values and prevent unnecessary re-renders.

Best Practice!

Combine useContext with useReducer for complex global state management, or consider state management libraries for very large applications!

Previous Topic

useReducer Hook

Advanced useReducer patterns, complex state logic, actions, dispatch, and comparing with useState.

Next Topic

useRef Hook

Access DOM elements, store mutable values, forward refs, and advanced ref patterns.

Ask a Question

Have a question about useContext Hook? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Hooks (Comprehensive)

useContext Hook

Master useContext for sharing data across components without prop drilling - the essential solution for global state management in React applications.

Find videos you like?

Save to resource drawer for future reference!

What is useContext?

The solution to prop drilling hell

Basic Syntax

const value = useContext(MyContext);

MyContext:The context object you want to read from

value:The current context value

When to Use?

Use useContext when you need to share data between components that are far apart in the component tree, like user authentication, theme settings, or language preferences!

The Problem: Prop Drilling Hell

Why we need useContext

Prop Drilling Pain

Without context, you must pass props through every intermediate component, even if they don't use them. This creates maintenance nightmares!

🚨 Before useContext (Prop Drilling)

// ❌ Painful prop drilling

function App() {}

const [user, setUser] = useState({} name: 'John' }));

return <Header user={user} />;

}

function Header({} user }) {}

return <Navigation user={user} />; // Just passing through!

}

function Navigation({} user }) {}

return <UserMenu user={user} />; // Still just passing!

}

function UserMenu({} user }) {}

return <span>Hello, {user.name}</span>; // Finally using it!

}

•Header and Navigation don't need user data, but must accept and pass it

•Adding a new level means updating ALL intermediate components

•Hard to track where data comes from and where it goes

•Components become tightly coupled to props they don't use

✅ After useContext (Clean & Simple)

// ✅ Clean with useContext

const UserContext = createContext();

function App() {}

const [user, setUser] = useState({} name: 'John' }));

return (

<UserContext.Provider value={user}>

</UserContext.Provider>

);

}

function Header() {}

return <Navigation />; // No props needed!

}

function UserMenu() {}

const user = useContext(UserContext); // Direct access!

return <span>Hello, {user.name}</span>;

}

•Intermediate components don't need to know about user data

•Add/remove components without touching prop chains

•Clear separation between data providers and consumers

•Components only access data they actually need

Step-by-Step Guide

Learn useContext progressively

Step 1: Create Context

First, create a context object using createContext(). Think of it as creating a special container for sharing data across components.

//Create a context with default value

const UserContext = createContext(null);

//Or with a more descriptive default

const ThemeContext = createContext('light');

Pro Tip

The default value is only used when a component tries to consume context without being wrapped in a Provider. Use meaningful defaults!

Step 2: Provide Context Value

Wrap components with Context.Provider and pass the value. This makes the data available to all child components!

function App() {}

const [user, setUser] = useState({} name: 'John' }));

return (

<UserContext.Provider value={}user}>

{} All child components can now access user

</UserContext.Provider>

);

};

Key Point

The Provider's value prop can be anything - object, string, number, function, or even another component!

Step 3: Consume Context

Use useContext Hook to access the context value. This is how child components can read the shared data!

function UserProfile() {}

const user = useContext(UserContext);

if (!user) {}

return <div>Please log in</div>;

})

return <div>Welcome, {}user.name}!</div>;

};

Important

useContext returns the context value for the context you pass. Make sure you're using the same context object you created!

Step 4: Update Context Value

Context updates automatically when the Provider's value changes. All consuming components will re-render with the new value!

function App() {}

const [user, setUser] = useState(null);

const login = (userData) => {}

setUser(userData);

});

return (

<UserContext.Provider value={}{} user, login })>

</UserContext.Provider>

);

};

Performance Note

When the Provider's value changes, ALL components using that context will re-render. Keep values stable when possible!

Step 5: Create Custom Hooks

Create custom hooks for cleaner code reuse and better error handling. This encapsulates context logic!

//Custom hook for user context

function useUser() {}

const context = useContext(UserContext);

if (!context) {}

throw new Error('useUser must be used within UserProvider');

})

return context;

};

//Usage in components

function UserProfile() {}

const {} user, login }) = useUser();

return <div>Welcome, {}user.name}</div>;

};

Best Practice

Custom hooks provide type safety, error handling, and a cleaner API for your context!

Real-World Examples

Practical useContext patterns

Theme Switcher

Global theme management with context

Frontend

// Theme Context
const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = React.useState('light');
  
  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };
  
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

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

// Components using the theme
function Header() {
  const { theme, toggleTheme } = useTheme();
  
  return (
    <header className={`header header-${theme}`}>
      <h1>My App</h1>
      <button onClick={toggleTheme}>
        Switch to {theme === 'light' ? 'Dark' : 'Light'} Mode
      </button>
    </header>
  );
}

function Content() {
  const { theme } = useTheme();
  
  return (
    <main className={`content content-${theme}`}>
      <h2>Welcome to {theme === 'light' ? 'Light' : 'Dark'} Mode!</h2>
      <p>This content adapts to the current theme.</p>
    </main>
  );
}

function App() {
  return (
    <ThemeProvider>
      <div className="app">
        <Header />
        <Content />
      </div>
    </ThemeProvider>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Live Preview

Loading preview...

User Authentication

Global user state with context

Frontend

// Auth Context
const AuthContext = createContext();

function AuthProvider({ children }) {
  const [user, setUser] = React.useState(null);
  const [isLoading, setIsLoading] = React.useState(false);
  
  const login = async (email, password) => {
    setIsLoading(true);
    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1000));
      const userData = { id: 1, name: 'John Doe', email };
      setUser(userData);
    } catch (error) {
      console.error('Login failed:', error);
    } finally {
      setIsLoading(false);
    }
  };
  
  const logout = () => {
    setUser(null);
  };
  
  const value = {
    user,
    isLoading,
    login,
    logout
  };
  
  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
}

function useAuth() {
  const context = React.useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within AuthProvider');
  }
  return context;
}

// Components using auth
function LoginForm() {
  const { login, isLoading } = useAuth();
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  
  const handleSubmit = (e) => {
    e.preventDefault();
    login(email, password);
  };
  
  return (
    <form onSubmit={handleSubmit} className="login-form">
      <h2>Login</h2>
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        required
      />
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Logging in...' : 'Login'}
      </button>
    </form>
  );
}

function UserProfile() {
  const { user, logout } = useAuth();
  
  return (
    <div className="user-profile">
      <h2>Welcome, {user.name}!</h2>
      <p>Email: {user.email}</p>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

function AppContent() {
  const { user } = useAuth();
  
  return (
    <div className="app">
      <header className="header">
        <h1>My App</h1>
      </header>
      <main className="main">
        {user ? <UserProfile /> : <LoginForm />}
      </main>
    </div>
  );
}

function App() {
  return (
    <AuthProvider>
      <AppContent />
    </AuthProvider>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Live Preview

Loading preview...

Common Mistakes & Solutions

Avoid these useContext pitfalls

🚨 Mistake 1: Forgetting to Wrap with Provider

// ❌ This will return undefined or default value

function MyComponent() {}

const user = useContext(UserContext); // undefined!

return <div>{user.name}</div>; // Error!

}

✅ Solution:

Always wrap components that use context with the appropriate Provider. Create a wrapper component if needed.

🚨 Mistake 2: Creating Context Inside Component

// ❌ New context on every render!

function BadComponent() {}

const UserContext = createContext(); // New context!

const user = useContext(UserContext);

return <div>{user.name}</div>;

}

✅ Solution:

Create context objects outside components, at module level. This ensures all components use the same context instance.

🚨 Mistake 3: Unnecessary Re-renders

// ❌ Object created on every render

function App() {}

return (

<UserContext.Provider value={} user: user, theme: theme })>

</UserContext.Provider>

);

}

✅ Solution:

Use useMemo to stabilize context values when they contain objects or functions to prevent unnecessary re-renders.

🚨 Mistake 4: Using Context for Everything

// ❌ Overusing context for local state

const FormInputContext = createContext();

const ButtonColorContext = createContext();

const LoadingContext = createContext();

// Too many contexts!

✅ Solution:

Use context for truly global state. For component-specific state, use props or component composition.

Key Takeaways

Remember these important points

Avoid Prop Drilling

Context eliminates the need to pass props through multiple component levels.

Global State Solution

Perfect for user authentication, themes, and settings needed app-wide.

Custom Hooks

Create custom hooks for cleaner, type-safe context access with error handling.

Performance Matters

Use useMemo to stabilize context values and prevent unnecessary re-renders.

Best Practice!

Combine useContext with useReducer for complex global state management, or consider state management libraries for very large applications!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

useReducer Hook

useRef Hook

Building Your Learning Module...

useContext Hook

Basic Syntax

When to Use?

Prop Drilling Pain

🚨 Before useContext (Prop Drilling)

✅ After useContext (Clean & Simple)

Step 1: Create Context

Step 2: Provide Context Value

Step 3: Consume Context

Step 4: Update Context Value

Step 5: Create Custom Hooks

Theme Switcher

User Authentication

🚨 Mistake 1: Forgetting to Wrap with Provider

✅ Solution:

🚨 Mistake 2: Creating Context Inside Component

✅ Solution:

🚨 Mistake 3: Unnecessary Re-renders

✅ Solution:

🚨 Mistake 4: Using Context for Everything

✅ Solution:

Avoid Prop Drilling

Global State Solution

Custom Hooks

Performance Matters

Best Practice!

useReducer Hook

useRef Hook

useContext Hook

Basic Syntax

When to Use?

Prop Drilling Pain

🚨 Before useContext (Prop Drilling)

✅ After useContext (Clean & Simple)

Step 1: Create Context

Step 2: Provide Context Value

Step 3: Consume Context

Step 4: Update Context Value

Step 5: Create Custom Hooks

Theme Switcher

User Authentication

🚨 Mistake 1: Forgetting to Wrap with Provider

✅ Solution:

🚨 Mistake 2: Creating Context Inside Component

✅ Solution:

🚨 Mistake 3: Unnecessary Re-renders

✅ Solution:

🚨 Mistake 4: Using Context for Everything

✅ Solution:

Avoid Prop Drilling

Global State Solution

Custom Hooks

Performance Matters

Best Practice!