React useContext Hook

🌍 React `useContext` Hook

The useContext Hook allows you to use global state across your React app without passing props manually through multiple components (called prop drilling).

It is used with the React Context API.

❌ Problem Without Context

If a value needs to be passed to deep child components:

You would need to pass props down through each level, even if the components don’t use the value.

This is called prop drilling and is hard to maintain.

✅ Solution: `useContext` + `Context API`

Context lets you:

✔ Share data globally
✔ Avoid prop drilling
✔ Make cleaner component structure

🛠 Step 1: Create Context

🛠 Step 2: Wrap Components with Provider

📌 value holds the data shared globally.

🛠 Step 3: Consume Context with `useContext`

import { useContext } from "react";
import { UserContext } from "./UserContext";

function Child() {
const user = useContext(UserContext);

return (
<h2>
User: {user.name} - Age: {user.age}
</h2>
);
}

export default Child;

import { useContext } from "react";

import { UserContext } from "./UserContext";

function Child() {

const user = useContext(UserContext);

return (

<h2>

User: {user.name} - Age: {user.age}

</h2>

);

}

export default Child;

🧪 Example Output:

🔁 Updating Context Value

You can also update context using state inside the provider:

import { createContext, useState } from "react";

export const CounterContext = createContext();

function App() {
const [count, setCount] = useState(0);

return (
<CounterContext.Provider value={{ count, setCount }}>
<Child />
</CounterContext.Provider>
);
}
export default App;

import { createContext, useState } from "react";

export const CounterContext = createContext();

function App() {

const [count, setCount] = useState(0);

return (

<CounterContext.Provider value={{ count, setCount }}>

</CounterContext.Provider>

);

}

export default App;

Child component:

import { useContext } from "react";
import { CounterContext } from "./App";

function Child() {
const { count, setCount } = useContext(CounterContext);

return (
<>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increment</button>
</>
);
}

export default Child;

import { useContext } from "react";

import { CounterContext } from "./App";

function Child() {

const { count, setCount } = useContext(CounterContext);

return (

<h2>Count: {count}</h2>

<button onClick={() => setCount(count + 1)}>Increment</button>

</>

);

}

export default Child;

🎯 When to Use `useContext`

Use it when:

✔ Data must shared across multiple components
✔ Avoid deep prop passing
✔ Global settings like:

Theme (dark/light mode)
Authentication (logged in user)
Language settings
Shopping cart data

⚠️ When NOT to Use Context

❌ For high-frequency updates (like animation or fast-changing data) — performance may drop.
Better alternatives: Redux, Zustand, Recoil.

🧠 Summary

Feature	Yes/No
Avoids prop drilling	✅
Global state sharing	✅
Easy with functional components	✅
Replacement for Redux?	❌ Not always

React useContext Hook