🔍 useContext Hook — Accessing Context Values

The `useContext` hook lets any component inside a Provider access the Context's value. It's the consumer side of Context.

🎯 Using useContext

To access a Context value, simply call `useContext()` with the Context object:

import { createContext, useContext } from "react";

const ThemeContext = createContext("light");

function Header() {
  // Access the theme value
  const theme = useContext(ThemeContext);

  return <h1>Current theme: {theme}</h1>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Header />
    </ThemeContext.Provider>
  );
}
// Output: "Current theme: dark"

`useContext` always returns the value from the nearest Provider above it. If there's no Provider, it returns the initial value.

💡 Accessing Object Values from Context

Most of the time, your Context holds an object with multiple values. You can destructure it:

import { createContext, useContext, useState } from "react";

const UserContext = createContext({ user: null, setUser: () => {} });

function UserProfile() {
  // Destructure the values you need
  const { user, setUser } = useContext(UserContext);

  if (!user) {
    return <p>No user logged in</p>;
  }

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

<details>

<summary>📚 More Examples</summary>

// Example 1: Accessing specific parts of context
const ConfigContext = createContext({
  apiUrl: "",
  timeout: 0,
});

function ApiClient() {
  // Only access what you need
  const { apiUrl } = useContext(ConfigContext);
  return <p>API: {apiUrl}</p>;
}

// Example 2: Using context value in effects and callbacks
function DataFetcher() {
  const { apiUrl, timeout } = useContext(ConfigContext);

  useEffect(() => {
    fetch(apiUrl, { signal: AbortSignal.timeout(timeout) })
      .then((res) => res.json())
      .then((data) => console.log(data));
  }, [apiUrl, timeout]);

  return <div>Fetching data...</div>;
}

</details>

🎨 Real-World Example: Language Switcher

Many apps need to display text in different languages. Use Context to share the current language:

import { createContext, useContext, useState } from "react";

type Language = "en" | "es" | "fr";

const LanguageContext = createContext({
  language: "en",
  setLanguage: (lang: Language) => {},
});

function LanguageSwitcher() {
  const { language, setLanguage } = useContext(LanguageContext);

  return (
    <div>
      <p>Current language: {language}</p>
      <button onClick={() => setLanguage("en")}>English</button>
      <button onClick={() => setLanguage("es")}>Español</button>
      <button onClick={() => setLanguage("fr")}>Français</button>
    </div>
  );
}

function GreetingMessage() {
  const { language } = useContext(LanguageContext);

  const greetings = {
    en: "Hello!",
    es: "¡Hola!",
    fr: "Bonjour!",
  };

  return <h1>{greetings[language]}</h1>;
}

function App() {
  const [language, setLanguage] = useState("en");

  return (
    <LanguageContext.Provider value={{ language, setLanguage }}>
      <LanguageSwitcher />
      <GreetingMessage />
    </LanguageContext.Provider>
  );
}

📊 useContext vs Props

🔑 Key Takeaways

• ✅ `useContext()` accesses Context values inside components

• ✅ Call `useContext()` with the Context object you want to access

• ✅ Components must be inside the Provider to use the Context

• ✅ You can destructure object values from Context

• ✅ Accessing Context causes re-renders when the value changes

• ✅ Use Context for data many components need

• ✅ Avoid using Context for data that changes very frequently

Ready to practice? Challenges | Next: Passing Data with Context