What’s the role of the useContext hook in React Hooks?

The useContext hook in React Hooks allows you to consume values from the React context without needing to explicitly pass props through every level of your component tree.

Role of useContext hook in React Hooks:

• Accessing Context Values:
  • With useContext, you can access values stored in a React context from any component within the same context provider.
• Avoiding Prop Drilling:
  • It helps avoid “prop drilling” which is the process of passing props down through multiple levels of components just to reach a component that needs those values.
• Simplified Data Sharing:
  • useContext simplifies the process of sharing data or functionality across many components in your application, especially when dealing with deeply nested components.
• Cleaner Component Structure:
  • By using useContext, you can keep your component tree cleaner and more readable by avoiding the clutter of passing props down through intermediary components.
• Easy-to-Use API:
  • useContext provides a straightforward API for accessing context values within functional components, making it intuitive and easy to use.

'useContext' enhances the flexibility and scalability of your React applications by providing a convenient way to share and access global state or other shared data without the need for complex prop threading.

Syntax:

import React, { useContext } from 'react';
const MyContext = React.createContext(defaultValue); // Create a context
function MyComponent() {
  const contextValue = useContext(MyContext); // Access context value
  // Use the context value in your component
}

Example: Below is the example to show the role of useContext hook in React Hooks.

Javascript

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

// Create a context
const ThemeContext = React.createContext();


function ThemeProvider({ children }) {
    const [theme, setTheme] = useState('light');

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

// Component that consumes the theme context
function ThemedComponent() {
    const { theme, setTheme } = useContext(ThemeContext);

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

    return (
        <div style={{
            backgroundColor: theme === 'light' ?
                '#ffffff' : '#333333', color: theme === 'light' ?
                    '#000000' : '#ffffff'
        }}>
            <p>Current Theme: {theme}</p>
            <button onClick={toggleTheme}>Toggle Theme</button>
        </div>
    );
}

// Usage
function App() {
    return (
        <ThemeProvider>
            <ThemedComponent />
        </ThemeProvider>
    );
}

export default App;

Output:

Output