ReactJS useContext Hook (original) (raw)

Last Updated : 05 Mar, 2025

In React Applications, sometimes managing state across deeply nested components can become very difficult. The useContext hook offers a simple and efficient solution to share state between components without the need for prop drilling.

What is useContext Hook?

The useContext hook in React allows components to consume values from the React context. React’s context API is primarily designed to pass data down the component tree without manually passing props at every level. useContext is a part of React's hooks system, introduced in React 16.8, that enables functional components to access context values.

It helps avoid the problem of "prop drilling," where props are passed down multiple levels from parent to child components.

**Syntax

const contextValue = useContext(MyContext);

How does it work?

The useContext hook allows to consume values from a React Context, enabling easy access to shared state across multiple components without prop drilling. Here’s how it works:

Creating a Context

Before using useContext, we need to create a context using React.createContext(). This context will provide a value that can be accessed by any child component wrapped in a Context.Provider.

JavaScript `

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

const MyContext = createContext();

function App() { const [value, setValue] = useState('Hello, World!');

return (
    <MyContext.Provider value={value}>
        <ChildComponent />
    </MyContext.Provider>
);

}

function ChildComponent() { const contextValue = useContext(MyContext); return

{contextValue}

; }

`

Implementing the useContext Hook

1. Managing Authentication with useContext

useContext can be used for managing the user authentication state globally.

JavaScript `

import React, { createContext, useContext, useState } from 'react'; const AuthContext = createContext(); function AuthProvider({ children }) { const [isLoggedIn, setIsLoggedIn] = useState(false); return ( <AuthContext.Provider value={{ isLoggedIn, setIsLoggedIn }}> {children} </AuthContext.Provider> ); } function LoginButton() { const { isLoggedIn, setIsLoggedIn } = useContext(AuthContext); return ( <button onClick={() => setIsLoggedIn(!isLoggedIn)}> {isLoggedIn ? 'Logout' : 'Login'} ); } function App() { return ( ); } export default App;

`

**Output

Animationkk

ReactJS useContext Hook

**In this example

2. Sharing a Theme Across Components

We will create a theme context and use useContext to access its values in child components.

JavaScript `

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

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

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

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

} function ThemedComponent() { const { theme, toggleTheme } = useContext(ThemeContext); return ( <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff', padding: '20px', textAlign: 'center' }}>

Current Theme: {theme}

Toggle Theme ); } function App() { return ( ); }

export default App;

`

**Output

Animationkk

ReactJS useContext Hook

**In this example

When to Use useContext

We can use the useContext when

useContext vs Prop Drilling

Feature useContext Prop Drilling
Performance Good (Can cause unnecessary renders) Efficient
Best for Small to medium apps Few component levels
Use Case Global state sharing Passing props manually

Performance Considerations

**To optimize performance when using React hooks: