how to use useContext hook in react with example

In React, the useContext hook is a powerful tool for managing state in your application by allowing components to consume values from a Context without the need for prop drilling.

This can greatly simplify the process of passing data through component hierarchies. Let's dive into the basics of useContext with a simple example.

What is Context?

Context in React is a way to pass data through the component tree without having to pass props down manually at every level. It is particularly useful when dealing with global data, such as user authentication, themes, or language preferences.

Creating a Context

First, let's create a simple context that will hold a user's authentication status.

// AuthContext.js
import { createContext } from 'react';

const AuthContext = createContext();

export default AuthContext;

Here, we've created a context using createContext and exported it. This context can now be used to share the authentication status across components.

Providing the Context Value

Now, let's create a component that provides the value for the context. In this example, we'll create an AuthProvider component that wraps our application.

// AuthProvider.js
import React, { useState } from 'react';
import AuthContext from './AuthContext';

const AuthProvider = ({ children }) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const login = () => {
    setIsAuthenticated(true);
  };

  const logout = () => {
    setIsAuthenticated(false);
  };

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

export default AuthProvider;

In this example, AuthProvider provides the isAuthenticated state along with login and logout functions as the context value.

Consuming the Context

Now, let's create a component that consumes the context. We can use the useContext hook to access the context value.

// Navbar.js
import React, { useContext } from 'react';
import AuthContext from './AuthContext';

const Navbar = () => {
  const { isAuthenticated, login, logout } = useContext(AuthContext);

  return (
    <div>
      <p>{isAuthenticated ? 'Logged In' : 'Logged Out'}</p>
      <button onClick={isAuthenticated ? logout : login}>
        {isAuthenticated ? 'Logout' : 'Login'}
      </button>
    </div>
  );
};

export default Navbar;

In this example, the Navbar component consumes the AuthContext using the useContext hook. It can now access the authentication status and perform login/logout actions.

Implementing in App Component

Now, let's implement the AuthProvider and use the Navbar component in our main App component.

// App.js
import React from 'react';
import AuthProvider from './AuthProvider';
import Navbar from './Navbar';

const App = () => {
  return (
    <AuthProvider>
      <div>
        <h1>My App</h1>
        <Navbar />
      </div>
    </AuthProvider>
  );
};

export default App;

Here, we wrap our entire application with AuthProvider to make the authentication context available to all components.

Conclusion

The useContext hook simplifies the process of consuming values from a React context, providing a clean and efficient way to manage global state in your application. As a beginner, understanding how to create, provide, and consume context can enhance your ability to manage shared state in a React application. Experiment with different contexts and see how they can streamline your component communication.