React useContext Hook

The useContext hook in React is used to access the values stored in a context. Context provides a way to share values between components without having to explicitly pass props through every level of the component tree. This can be especially useful for things like theming, user authentication, or global state management.

Basic Usage of useContext

Here’s a step-by-step guide to using the useContext hook:

1. Create a Context: Use the createContext function to create a context.
2. Provide a Context Value: Use the Provider component to pass the context value down the component tree.
3. Consume the Context Value: Use the useContext hook to access the context value in any component.

Step-by-Step Example

Step 1: Create a Context

Create a context in a separate file (e.g., ThemeContext.js):

        import React, { createContext } from 'react';

        const ThemeContext = createContext();
        
        export default ThemeContext;
      

Step 2: Provide a Context Value

Wrap the part of your component tree where you want to provide the context value with the Provider component. This is usually done in a higher-level component, like App.js:

        import React, { useState } from 'react';
        import ThemeContext from './ThemeContext';
        import ChildComponent from './ChildComponent';
        
        const App = () => {
          const [theme, setTheme] = useState('light');
        
          const toggleTheme = () => {
            setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
          };
        
          return (
            
              
            
          );
        };
        
        export default App;

      

Benefits of Using useContext

• Avoid Prop Drilling: Context helps in avoiding prop drilling by allowing you to pass data through the component tree without having to pass props down manually at every level.
• Centralized State Management: Useful for managing global state like user authentication, themes, language settings, etc.
• Cleaner Code: Makes the code cleaner and easier to manage, especially in larger applications.

Example: User Authentication

Here's another example demonstrating how to use useContext for user authentication:

Step 1: Create a User Context

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

        const UserContext = createContext();
        
        export const UserProvider = ({ children }) => {
          const [user, setUser] = useState(null);
        
          const login = (userData) => {
            setUser(userData);
          };
        
          const logout = () => {
            setUser(null);
          };
        
          return (
            
              {children}
            
          );
        };
        
        export default UserContext;
      

Step 2: Provide User Context

Wrap your application or specific parts of your application with the UserProvider:

        import React from 'react';
        import ReactDOM from 'react-dom';
        import App from './App';
        import { UserProvider } from './UserContext';
        
        ReactDOM.render(
          
            
          ,
          document.getElementById('root')
        );