# Using Context API

> Teaches Context API patterns in React 19 including use() hook for conditional context access. Use when implementing Context, avoiding prop drilling, or managing global state. Use when this capability is needed.

- Skill: `tomevault-io/using-context-api` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/using-context-api`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/using-context-api/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/using-context-api

---


# Context API Patterns in React 19

## Basic Pattern

```javascript
import { createContext, use, useState } from 'react';

const UserContext = createContext(null);

export function UserProvider({ children }) {
  const [user, setUser] = useState(null);

  return (
    <UserContext value={{ user, setUser }}>
      {children}
    </UserContext>
  );
}

export function useUser() {
  const context = use(UserContext);

  if (!context) {
    throw new Error('useUser must be used within UserProvider');
  }

  return context;
}
```

## React 19: Conditional Context Access

`use()` allows context access inside conditionals (unlike `useContext`):

```javascript
function Component({ isPremium }) {
  let theme;

  if (isPremium) {
    theme = use(ThemeContext);
  }

  return <div className={theme}>Content</div>;
}
```

## Splitting Contexts

Avoid unnecessary re-renders by splitting contexts:

```javascript
const UserContext = createContext(null);
const ThemeContext = createContext('light');

function App() {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');

  return (
    <UserContext value={{ user, setUser }}>
      <ThemeContext value={{ theme, setTheme }}>
        <Layout />
      </ThemeContext>
    </UserContext>
  );
}
```

Now theme changes don't re-render components only using UserContext.

For comprehensive Context patterns, see: `research/react-19-comprehensive.md` lines 288-303, 1326-1342, 1644-1670.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/djankies) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-16 -->