gh-djankies-claude-configs-react-19/skills/using-context-api/SKILL.md

name, description, allowed-tools, version

name	description	allowed-tools	version
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.	Read, Write, Edit	1.0.0

Context API Patterns in React 19

Basic Pattern

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):

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:

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.