What’s the role of the useContext hook in React Hooks?
Last Updated :
19 Feb, 2024
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' ;
const ThemeContext = React.createContext();
function ThemeProvider({ children }) {
const [theme, setTheme] = useState( 'light' );
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
}
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>
);
}
function App() {
return (
<ThemeProvider>
<ThemedComponent />
</ThemeProvider>
);
}
export default App;
|
Output:
Output
Share your thoughts in the comments
Please Login to comment...