How To use createContext API, A Comprehensive Guide to React’s createContext API with Real-Life Examples

A Comprehensive Guide to React’s createContext API with Real-Life Examples

React’s createContext API is a powerful tool that enables developers to share data across components without having to pass props down manually through each level of the component tree. This pattern, often referred to as the Context API, is useful for managing global state or theme settings, user authentication, and more. In this article, we'll explore the createContext API, understand its key concepts, and walk through various examples to demonstrate its practical applications.

What is the createContext API?

The createContext API allows you to create a Context object, which provides a way to pass data through the component tree without having to pass props manually at every level. This is particularly useful for managing states that need to be accessible by many components, such as user information, themes, or language settings.

Basic Usage of createContext

To start using the createContext API, you need to create a Context object using React.createContext() and then use a Provider component to pass data down the component tree.

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

// Create a Context object
const UserContext = createContext();

function App() {
  const user = { name: 'John Doe', age: 30 };

  return (
    // Use the Provider component to pass the current user value down the tree
    <UserContext.Provider value={user}>
      <UserProfile />
    </UserContext.Provider>
  );
}

function UserProfile() {
  // Use the useContext hook to consume the current user value
  const user = useContext(UserContext);
  return (
    <div>
      <h1>User Profile</h1>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
    </div>
  );
}

export default App;

In this example:

• We create a UserContext using createContext().
• The App component uses the UserContext.Provider to pass down a user object.
• The UserProfile component consumes the user data using the useContext hook.

Real-Life Example: Theme Management

A common use case for the createContext API is managing themes across an application. Let's create a simple theme toggler using Context.

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

// Create a ThemeContext
const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <div className={theme}>
        <h1>React Theme Toggler</h1>
        <ThemeToggleButton />
      </div>
    </ThemeContext.Provider>
  );
}

function ThemeToggleButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  return (
    <button onClick={toggleTheme}>
      Switch to {theme === 'light' ? 'dark' : 'light'} mode
    </button>
  );
}

export default App;

In this example:

• A ThemeContext is created to manage the theme state.
• The App component provides the theme state and a toggle function to its children via the ThemeContext.Provider.
• The ThemeToggleButton consumes the theme state and toggle function using useContext, allowing it to toggle the theme when clicked.

Real-Life Example: User Authentication

Another common scenario is managing user authentication status. Here’s how you might use the createContext API to handle user login and logout.

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

// Create an AuthContext
const AuthContext = createContext();

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

  const login = (userData) => {
    setUser(userData);
  };

  const logout = () => {
    setUser(null);
  };

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

function Header() {
  const { user, logout } = useContext(AuthContext);
  return (
    <header>
      {user ? (
        <div>
          <span>Welcome, {user.name}</span>
          <button onClick={logout}>Logout</button>
        </div>
      ) : (
        <span>Please log in</span>
      )}
    </header>
  );
}

function UserProfile() {
  const { user } = useContext(AuthContext);
  if (!user) {
    return <p>You need to log in to view your profile.</p>;
  }
  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>
  );
}

export default App;

In this example:

• AuthContext manages the user’s authentication state.
• The App component provides user data and authentication functions (login and logout) via AuthContext.Provider.
• The Header and UserProfile components consume the authentication data to display user information and handle login/logout actions.

Context with Nested Components

Sometimes, you may need to pass data to deeply nested components. Using the createContext API can simplify this process by avoiding prop drilling.

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

// Create a Context for the language settings
const LanguageContext = createContext();

function App() {
  const language = 'English';
  return (
    <LanguageContext.Provider value={language}>
      <Page />
    </LanguageContext.Provider>
  );
}

function Page() {
  return (
    <div>
      <h1>Main Page</h1>
      <Content />
    </div>
  );
}

function Content() {
  const language = useContext(LanguageContext);
  return (
    <div>
      <h2>Content Section</h2>
      <p>The current language is {language}</p>
    </div>
  );
}

export default App;

In this example:

• LanguageContext is used to pass the language setting down to the Content component.
• The Content component, which is nested inside Page, can easily access the language value using useContext(LanguageContext).

Handling Multiple Contexts

You might encounter scenarios where you need to use multiple contexts. React allows you to nest Provider components to handle such cases.

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

// Create contexts for theme and language
const ThemeContext = createContext();
const LanguageContext = createContext();

function App() {
  const [theme] = useState('light');
  const [language] = useState('English');

  return (
    <ThemeContext.Provider value={theme}>
      <LanguageContext.Provider value={language}>
        <Content />
      </LanguageContext.Provider>
    </ThemeContext.Provider>
  );
}

function Content() {
  const theme = useContext(ThemeContext);
  const language = useContext(LanguageContext);
  return (
    <div className={`theme-${theme}`}>
      <p>The current theme is {theme}</p>
      <p>The current language is {language}</p>
    </div>
  );
}

export default App;

In this example:

• Two contexts, ThemeContext and LanguageContext, are created to manage theme and language settings.
• The Content component consumes both contexts to display the current theme and language.

Conclusion

The createContext API is a versatile tool in React that simplifies state management across components. Whether you're dealing with theme settings, user authentication, or other global states, Context provides a clean and efficient way to manage and share data.

By understanding how to use createContext, Provider, and useContext, you can streamline your React applications, reducing the need for prop drilling and making your code more maintainable. Use the examples provided here to explore how you can integrate the Context API into your own projects and enhance the user experience.