# context hooks in react
**Context hooks in React, primarily**
[useContext](https://www.google.com/search?client=ubuntu-sn&channel=fs&q=useContext&mstk=AUtExfAunjEc3Jg-sEBzm2sxLB7-F02T1b7IdzbIMbqIgwAG5BT4cE3xlz_OaBqLs47LPh7O6PHUD_XrXKfMQnzeo4_WPWgLd3jb4xzH7TTTbV9gysdTmHDSV-6cpKC0nSgBsU-ad3U71jFeVpdvDXllUk8j2W2olPEzFWRHqlT2wJjHPilEFAfW8qNiFUc5O_4S9nGFfgBG660U_X2sFO0hTcRINN_GBcTvv21SHJihAI3W7DOa59l8nuHcNsD9_Jr4IZ-xsc7i42dyF3c51gsI1yrs&csui=3&ved=2ahUKEwjnu-_vnbCRAxWMUGwGHUPqPI0QgK4QegQIARAB), allow functional components to **subscribe to and consume data from React's Context API**, simplifying global state management by avoiding "prop drilling" (passing props down many levels). You create a `Context` with `React.createContext()`, wrap parts of your app with a `Provider` to pass data down, and then use `useContext(MyContext)` in any nested component to read that data, making it ideal for themes, authentication, or user settings.
**Key Components**
1. **`React.createContext()`**: Creates a Context object, often with a default value, that components can subscribe to.
2. **``**: A component that wraps a part of your component tree and uses the `value` prop to provide data to all descendants.
3. **`useContext(Context)`**: A hook used in functional components to read the current context value from the nearest `Provider` above it in the tree.
**How It Works (Simplified)**
1. **Create Context**:
2. ```
import { createContext } from 'react';
const ThemeContext = createContext('light'); // Default value
```
3. **Provide Context**: Wrap components with the `Provider` high up in the tree.
4. ```
function App() {
return (
);
}
```
5. **Consume Context**: Use `useContext` in any child component to get the value.
```
import { useContext } from 'react';
function Toolbar() {
const theme = useContext(ThemeContext); // Gets "dark"
return The current theme is: {theme}
;
}
```
**Benefits**
- **Avoids Prop Drilling**: Eliminates the need to pass props through intermediate components that don't need the data.
- **Simpler Syntax**: More concise and declarative than older methods (like render props or Consumer components) for functional components.
- **Global State**: Great for sharing data like themes, user info, or language settings across an application.
**Best Practice: Custom Hooks**
For cleaner code, especially with complex contexts (like theme + setter), create a custom hook that encapsulates the `useContext` call and error handling (e.g., checking for null if used outside a provider).
```
// useTheme.js
import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';
export function useTheme() {
const context = useContext(ThemeContext);
if (context === undefined) {
throw new Error('useTheme must be used within a ThemeProvider');
}
return context;
}
```