How to Use useContext in React: Usage Methods and Scenarios

The useContext hook in React is a tool that allows components to access React Context. This context is designed to share data that is accessible across the component tree, such as the currently authenticated user, theme, or preferred language.

Usage Methods:

First, you need to create a Context object. This can be done using React.createContext() and is typically implemented at a higher level within the component tree.

javascript
import React from 'react';

// Create a Context object
const MyContext = React.createContext(defaultValue);

Once you have a Context object, you can wrap a portion of your component tree with the Context.Provider component to provide context data to all components beneath it.

javascript
<MyContext.Provider value={/* some values */}>
  {/* Component tree */}
</MyContext.Provider>

Then, at any level within the component tree, you can use the useContext hook to access the context.

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

function MyComponent() {
  // Use the useContext hook to retrieve the context value
  const contextValue = useContext(MyContext);
  return <div>{/* Utilize contextValue as needed */}</div>;
}

By using the useContext hook, you don't need to manually pass data through props; instead, you can directly access data provided by the Context.Provider in parent components.

Usage Scenarios:

1. Theme Switching: When implementing theme changes across your application, you can use context to maintain the current theme state and access it seamlessly throughout the component tree.

2. User Authentication: For multiple components requiring knowledge of the user's login status, you can use context to share authentication state and user information.

3. Internationalization: You can store current language settings in context and access them anywhere in the component tree to support internationalization.

4. State Management: In simple cases, context can replace libraries like Redux for managing global state, though it's less suitable for complex applications.

Example:

Suppose you need to share authentication state across multiple components; you can use useContext as follows:

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

// Create context object with null initial value
export const AuthContext = createContext(null);

// Create a provider component
export const AuthProvider = ({ children }) => {
  const [authUser, setAuthUser] = useState(null);

  // Login logic
  const signIn = (username, password) => {
    // Assume validation logic here
    const user = { name: 'Mock User', username };
    setAuthUser(user);
  };

  // Logout logic
  const signOut = () => {
    setAuthUser(null);
  };

  return (
    <AuthContext.Provider value={{ authUser, signIn, signOut }}>
      {children}
    </AuthContext.Provider>
  );
};

// App.js
import React from 'react';
import { AuthProvider } from './AuthContext';
import MyComponent from './MyComponent';

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

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

function MyComponent() {
  const { authUser, signIn, signOut } = useContext(AuthContext);

  return (
    <div>
      {authUser ? (
        <div>
          <p>Welcome, {authUser.name}!</p>
          <button onClick={signOut}>Sign out</button>
        </div>
      ) : (
        <button onClick={() => signIn('user', 'password')}>
          Sign in
        </button>
      )}
    </div>
  );
}