useContext
Subject: React
🔍 What is useContext?
useContext is a React Hook that allows components to access global/shared data without prop drilling.
Think of it like a global variable — any component can read from it, no matter how deep it is in the component tree.
🔁 Why Use useContext
| Without Context | With Context |
|---|---|
| Pass data parent → child → subchild | Access data directly in any component |
| Complex and repetitive prop chains | Cleaner and more scalable |
| Tedious to update/apply globally | Simple global data flow |
🛠️ Real Use Cases
- Authenticated user info
- Theme (light/dark)
- Language (i18n)
- App-wide preferences/settings
- Combine with
useReducerfor global state
📦 Basic Setup of Context
✅ Example: Share User Data Across Components
UserContext.js
App.js
Dashboard.js
🧠 Logic Explained
| Step | Description |
|---|---|
createContext() | Creates a Context object |
Provider | Makes the value available to children |
useContext(Context) | Hook to read the value in any nested component |
| Value Flow | Parent → Provider → Any child component |
✅ Dynamic Updates with Context
Example:
Access + update from anywhere:
⚠️ When NOT to Use Alone
- For complex global state, combine with
useReducer - Frequent context updates? → Use React.memo or split into smaller contexts
📌 Summary Table
| Feature | Description |
|---|---|
createContext() | Creates context container |
Provider | Wraps components and shares a value |
useContext() | Reads the shared value inside any component |
| Avoids | Prop drilling |
| Best For | Theme, auth, user info, i18n, shared app settings |
🧪 Real-Life Analogy
Context is like cloud storage:
- Upload data once using a
Provider - Any connected component ("device") can download it using
useContext
Advertisement Slot 1
Advertisement Slot 2