What is the main benefit of using React Context API?

It allows sharing data globally across components without passing props manually at every level.

Can React Context replace Redux?

Context can handle simple global state but Redux is better suited for complex state management with middleware and advanced debugging.

How do I avoid performance issues with Context?

Avoid frequent updates to context values, memoize provider values, and split contexts for unrelated data.

Topic 17018 min readStructured Tutorial

React Context API Examples

Quick Answer

React Context API allows you to share state across components without prop drilling. By creating a context, providing it at a top-level component, and consuming it in nested components, you can manage global state efficiently. Examples include theme toggling, user authentication state, and language settings.

Learning Objectives

Understand how to create and use React Context API.
Implement practical examples of global state management with Context.
Learn best practices for structuring Context Providers and Consumers.

Introduction

React Context API is a powerful feature that enables sharing data across components without passing props manually at every level.

This tutorial focuses on practical examples to help you understand how to implement and use Context effectively in your React applications.

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Course Progress0%

Was this topic helpful?

Your feedback helps us improve this lesson.

Topic information

Author

RPATechnology Team

Last Updated

June 2026

Suggested learning path

Related Courses

Continue learning with related technologies and tracks.

Programming LanguagesBeginner FriendlyCareer Focused

C# Programming Course for Beginners to Advanced | Learn C# and .NET

Master C# programming with a complete beginner-to-advanced course covering OOP, collections, LINQ, async programming, Entity Framework Core, ASP.NET Core, Web APIs, design patterns, and real-world projects.

Structured lessons

View Course

Examples

ThemeContext Example

import React, { createContext, useState, useContext } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => {
    setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

// Usage in a component
function ThemedButton() {
  const { theme, toggleTheme } = useTheme();
  return (
    <button onClick={toggleTheme} style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      Toggle Theme
    </button>
  );
}

This example creates a ThemeContext with a provider that manages the theme state and a toggle function. The useTheme hook simplifies consuming the context in components like ThemedButton.

AuthContext Example

import React, { createContext, useState, useContext } from 'react';

const AuthContext = createContext();

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

  const login = (userData) => setUser(userData);
  const logout = () => setUser(null);

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

// Usage in a component
function UserProfile() {
  const { user, logout } = useAuth();
  if (!user) return <div>Please log in.</div>;
  return (
    <div>
      <p>Welcome, {user.name}!</p>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

This example shows how to create an AuthContext to manage user login state globally. Components can access user info and authentication functions easily.

LanguageContext Example

import React, { createContext, useState, useContext } from 'react';

const LanguageContext = createContext();

export function LanguageProvider({ children }) {
  const [language, setLanguage] = useState('en');

  const switchLanguage = (lang) => setLanguage(lang);

  return (
    <LanguageContext.Provider value={{ language, switchLanguage }}>
      {children}
    </LanguageContext.Provider>
  );
}

export function useLanguage() {
  return useContext(LanguageContext);
}

// Usage in a component
function Greeting() {
  const { language } = useLanguage();
  const greetings = { en: 'Hello', es: 'Hola', fr: 'Bonjour' };
  return <h1>{greetings[language]}</h1>;
}

This example demonstrates how to manage language preferences using Context. The LanguageProvider holds the current language and a function to switch it, enabling localized UI.

Learning Objectives

Introduction

Was this topic helpful?

Topic information

Recommended Next Topics

Best Practices

Introduction to React Router

Installing React Router

Route Configuration

Related Topics

Related Courses

C# Programming Course for Beginners to Advanced | Learn C# and .NET

Creating a Simple Theme Context

ThemeContext Code Example

User Authentication State with Context

Language Localization Example

Practical Example

Examples

Best Practices

Common Mistakes

Hands-on Exercise

Create a Counter Context

Implement a Language Switcher

Interview Questions

What problem does React Context API solve?

How do you consume a context in a functional component?

When should you avoid using React Context API?

MCQ Quiz

1. What is the primary purpose of React Context API as demonstrated in the ThemeContext example?

2. In the ThemeContext example, what does the toggleTheme function do?

3. Why is it beneficial to use Context for managing user authentication state as shown in the AuthContext example?

4. In the Language Localization example, what is the role of the function provided in the LanguageContext?

5. What is a best practice when using React Context API to maintain app performance?

Key Takeaways

Frequently Asked Questions

What is the main benefit of using React Context API?

Can React Context replace Redux?

How do I avoid performance issues with Context?

Summary

Nested Routes

Dynamic Routes

Java Programming Course for Developers and Interview Success | RPATechnology.in

Complete JavaScript Tutorial for Beginners to Advanced | JavaScript Programming Course

Complete MongoDB Tutorial for Beginners to Advanced | MongoDB Course

Complete MySQL Tutorial for Beginners to Advanced | MySQL Database Course

Complete Python Tutorial for Beginners to Advanced | Python Programming Course