Day 9 of 100 Days of Code — Understanding the React Context API

Posted on by — No Comments ↓

If you’ve spent some time working with React, you’ve probably heard about the Context API but may not have fully understood when or why to use it. The Context API is a built-in feature of React that allows data to be shared across components without having to pass props through every level of the component tree. It becomes particularly useful in situations where multiple components need access to the same data, such as theme settings, authentication status, or app-wide configurations. Learning for Day 9, the idea was to understand the Context API, an essential tool for building clean, maintainable React applications and avoiding the complexities of prop drilling in larger projects.

What Exactly Is the React Context API?

The Context API is a built-in React feature that allows you to share data across your component tree without having to manually pass props down through every level.

Think of it as:

“A centralized, React-native way to manage shared state or shared values across deeply nested components.”

It removes the need for prop-drilling — that messy situation where a value must be passed through many components that don’t even use it.

🤔 Why Use Context API When We Already Have Props?

Props are fantastic for parent-to-child communication. But they fall short when:

  • A value is needed by many deeply nested components
  • You are forced to pass the same prop five layers deep
  • Components become tightly coupled because of unnecessary prop passing

This is called prop drilling, and it quickly becomes hard to manage — even in medium-sized apps.

Context API solves this by allowing components to skip the chain and access shared values directly.

When Does Using Context API Become Necessary?

Context shines when you have global-ish values—things many components might need:

  • Authentication/user data
  • Theme (dark/light)
  • Language preferences
  • Shopping cart state
  • App-level settings
  • UI states like modals or toasts

If the data must be accessed by multiple siblings, nested or unrelated components, Context API is the cleanest and most scalable approach.

The “Context Provider” Pattern (In a Nutshell)

A Context usually includes:

  1. Creating a context
  2. Wrapping your app (or part of it) with a provider
  3. Passing values to the provider
  4. Consuming those values anywhere

Providers act like a data broadcasting station — any component listening to them can instantly receive the state.

Real-World Example: A Simple Theme Switcher

Consider a real use case:

You want to toggle light and dark mode, and multiple components need to know the current theme.

Passing theme as a prop everywhere?
— No need when Context is there.

Step 1: Create the Theme Context

// ThemeContext.js
import { createContext } from "react";

export const ThemeContext = createContext();

What’s happening here?

  • createContext() creates a new Context object.
  • It will store and share theme-related data across the app.

Step 2: Build a Theme Provider

// ThemeProvider.js
import { useState } from "react";
import { ThemeContext } from "./ThemeContext";

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () =>
    setTheme((prev) => (prev === "light" ? "dark" : "light"));

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

Explanation:

  • theme state is stored here.
  • toggleTheme updates the theme.
  • The value prop exposes the shared data to all children.
  • Every nested component can now read theme directly — not through props.

Step 3: Wrap Your App with the Provider

// App.jsx
import { ThemeProvider } from "./ThemeProvider";
import Home from "./Home";

export default function App() {
  return (
    <ThemeProvider>
      <Home />
    </ThemeProvider>
  );
}

Now every component inside <Home /> has access to theme data.

Step 4: Consume the Context Anywhere

// Home.jsx
import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

export default function Home() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{ padding: 20 }}>
      <h1>Current Theme: {theme}</h1>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

What’s happening here:

  • useContext(ThemeContext) pulls data directly from the provider.
  • No props. No drilling. No unnecessary pass-throughs.

Clean. Direct. Easy to maintain.

Typing Context in TypeScript (Clean & Safe)

TypeScript makes Context safer by ensuring the shape of your context is always correct.

Step 1: Define the Type

type ThemeContextType = {
  theme: "light" | "dark";
  toggleTheme: () => void;
};

Step 2: Create a Typed Context

import { createContext } from "react";

export const ThemeContext = createContext<ThemeContextType | null>(null);

Step 3: Provide Typed Values

export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const [theme, setTheme] = useState<"light" | "dark">("light");

  const toggleTheme = () =>
    setTheme((t) => (t === "light" ? "dark" : "light"));

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

Step 4: Safely Consume the Context

const ctx = useContext(ThemeContext);
if (!ctx) throw new Error("ThemeContext must be used under ThemeProvider");

const { theme, toggleTheme } = ctx;

This ensures full type-safety and prevents runtime errors.

Summary — Key Takeaways

  • Context API is used to share data across components without prop drilling.
  • It is ideal for state that many components need (auth, theme, settings).
  • Do not use it for every tiny piece of state; props still work great for simple parent-child communication.
  • Context becomes necessary when data is accessed by deep or unrelated components.
  • Provider patterns allow clean state broadcasting and decoupled architecture.
  • Typing Context in TypeScript improves safety, autocompletion, and debugging.

Using the Context API helps keep React applications organized and state management clean, especially in larger projects. By sharing data efficiently across components, it reduces unnecessary prop drilling and simplifies maintenance. Mastering Context ensures that state is managed responsibly, making your code more scalable and easier to work with.

Happy coding!

Leave a Reply