What is useContext?

useContext is a React Hook that lets you access values from a context without needing to pass props manually through each level of your component tree. It works with React's Context API, which is meant for sharing data like user information, themes, or app settings across multiple components. By using useContext, you can directly read and use the context value within any component nested inside the matching context provider.

Prop Drilling:

Example: A deeply nested child needs user data, but you have to pass it through 5 layers of components just to get it there

• When you need to pass props through many layers of components (even if the middle ones don't use them), your code becomes cluttered and harder to understand.

• Prop drilling connects components too closely. If you change a prop's shape or name, you often need to update every single level that passes it down—even if those levels don't use the value.

• As your app grows, managing deeply passed props becomes error-prone and hard to debug. It reduces component reusability and can cause bugs when props are lost or passed incorrectly.

---

createContext():

import { createContext } from 'react';

// Create the context
export const MyContext = createContext();

What is createContext?

createContext() is a function in React that creates a Context object, allowing you to share values (like state or functions) between components without having to pass props manually at every level.

Why use it?

If you have data that many components need (such as user info, theme settings, or language preferences), createContext helps you avoid "prop drilling"—the trouble of passing props through multiple layers.

---

Providers:

import { createContext } from 'react';

export const ThemeContext = createContext();

// Wrap your app (or part of it) with the Provider:
<ThemeContext.Provider value={{ darkMode: true }}>
  <YourComponent />
</ThemeContext.Provider>

What is a Provider?

A Provider is a special React component that comes with every context created using createContext(). It is used to pass data down to all components that need access to it, no matter how deeply nested they are.

Why use it?

Without a Provider, the context cannot provide any value. The Provider wraps your component tree and "provides" the value you want to share across your app, such as user info, settings, or functions.

---

useContext Hook:

import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const MyComponent = () => {
  const theme = useContext(ThemeContext);

  return <div>{theme.darkMode ? 'Dark Mode' : 'Light Mode'}</div>;
};

What is useContext?

useContext is a React Hook that allows you to access the value from a context directly within a functional component, without needing to use <Context.Consumer>.

Why use it?

It makes reading context simple and clean. No wrappers, no nesting—just connect your context, and you're all set. It's perfect for shared state like user data, themes, or app settings.

---

Value Propagation:

What is value propagation?

Value propagation means that any changes to the value inside a Context’s <Provider> will automatically update all components that use that context through useContext.

Why does it matter?

It keeps your app in sync. When shared data updates (like user login status, theme toggle, or language setting), all components using that data will re-render with the latest value—no need to manually pass props or trigger updates.

---

Avoiding Overuse:

Why avoid overusing it?

Because every component using the context will re-render when the context value changes—even if they only need a small part of it. This can lead to:

• ⚡ Unnecessary re-renders

• 🐢 Performance slowdowns

• 😵 Harder debugging and state tracking

When to use useContext:

✅ Use it for:

• Auth/user info

• Theme or language settings

• App-wide preferences

• Functions that many components need (e.g., logout(), toggleTheme())

❌ Avoid using it for:

• UI state that's only relevant to one or two components

• High-frequency state (like animation steps, scroll position, timers)

• Deeply nested components that don’t need the value directly