Context とジェネリックコンポーネント

import { createContext, useContext } from 'react';

type Theme = 'light' | 'dark';

const ThemeContext = createContext<Theme>('light');

function useTheme() {
  return useContext(ThemeContext);
}

// 使用箇所
function Toolbar() {
  const theme = useTheme();    // Theme — 常に意味ある値
  return <div className={theme}>...</div>;
}

type User = { id: string; name: string };

const UserContext = createContext<User | null>(null);

export function useUser() {
  const user = useContext(UserContext);
  if (user === null) {
    throw new Error('useUser は UserProvider の中でのみ呼び出してください');
  }
  return user;     // ここから User にナローイングされる
}

// 使用箇所
function Profile() {
  const user = useUser();      // User(null 分岐不要)
  return <p>{user.name}</p>;
}

import { createContext, useContext, useReducer } from 'react';

type State = { count: number };
type Action = { type: 'inc' } | { type: 'dec' };

const StateContext = createContext<State | null>(null);
const DispatchContext = createContext<React.Dispatch<Action> | null>(null);

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'inc': return { count: state.count + 1 };
    case 'dec': return { count: state.count - 1 };
  }
}

export function CounterProvider({ children }: { children: React.ReactNode }) {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <StateContext.Provider value={state}>
      <DispatchContext.Provider value={dispatch}>
        {children}
      </DispatchContext.Provider>
    </StateContext.Provider>
  );
}

export function useCounterState() {
  const v = useContext(StateContext);
  if (v === null) throw new Error('CounterProvider の中でのみ使用');
  return v;
}

export function useCounterDispatch() {
  const v = useContext(DispatchContext);
  if (v === null) throw new Error('CounterProvider の中でのみ使用');
  return v;
}

type ListProps<T> = {
  items: readonly T[];
  renderItem: (item: T) => React.ReactNode;
  keyOf: (item: T) => string | number;
};

function List<T>({ items, renderItem, keyOf }: ListProps<T>) {
  return (
    <ul>
      {items.map((item) => (
        <li key={keyOf(item)}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

// 使用箇所
type Todo = { id: string; text: string };

function TodoList({ todos }: { todos: Todo[] }) {
  return (
    <List
      items={todos}
      keyOf={(t) => t.id}
      renderItem={(t) => <span>{t.text}</span>}
    />
  );
}

type WithId = { id: string };

type ListProps<T extends WithId> = {
  items: readonly T[];
  renderItem: (item: T) => React.ReactNode;
};

function List<T extends WithId>({ items, renderItem }: ListProps<T>) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{renderItem(item)}</li>   // item.id 使用可能
      ))}
    </ul>
  );
}

// 使用箇所は keyOf を書かなくてよい
<List items={todos} renderItem={(t) => <span>{t.text}</span>} />

import type { ElementType, ComponentPropsWithoutRef } from 'react';

type BoxProps<E extends ElementType> = {
  as?: E;
  children?: React.ReactNode;
} & Omit<ComponentPropsWithoutRef<E>, 'as' | 'children'>;

function Box<E extends ElementType = 'div'>({
  as,
  children,
  ...rest
}: BoxProps<E>) {
  const Tag = as ?? 'div';
  return <Tag {...rest}>{children}</Tag>;
}

// 使用箇所
<Box>既定の div</Box>
<Box as="a" href="/about">リンクのように</Box>
<Box as="button" onClick={() => {}}>ボタンのように</Box>

import type { Ref } from 'react';

type SelectProps<T> = {
  ref?: Ref<HTMLSelectElement>;
  options: readonly T[];
  getValue: (item: T) => string;
  getLabel: (item: T) => string;
};

function Select<T>({ ref, options, getValue, getLabel }: SelectProps<T>) {
  return (
    <select ref={ref}>
      {options.map((opt) => (
        <option key={getValue(opt)} value={getValue(opt)}>
          {getLabel(opt)}
        </option>
      ))}
    </select>
  );
}

// 使用箇所
type Country = { code: string; name: string };
const countries: Country[] = [
  { code: 'kr', name: '大韓民国' },
  { code: 'us', name: 'United States' },
];

function CountryPicker() {
  const ref = useRef<HTMLSelectElement>(null);
  return (
    <Select
      ref={ref}
      options={countries}
      getValue={(c) => c.code}
      getLabel={(c) => c.name}
    />
  );
}

function useResource<T>(url: string): { data: T | null; loading: boolean } {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((r) => r.json() as Promise<T>)
      .then((d) => {
        setData(d);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

// 使用箇所
const { data } = useResource<User>('/api/me');
// data: User | null

import { createContext, useContext, useState, useCallback } from 'react';
import type { ReactNode } from 'react';

type User = {
  id: string;
  name: string;
};

type AuthContextValue = {
  user: User | null;
  login: (name: string) => void;
  logout: () => void;
};

const AuthContext = createContext<AuthContextValue | null>(null);

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  const login = useCallback((name: string) => {
    setUser({ id: crypto.randomUUID(), name });
  }, []);

  const logout = useCallback(() => setUser(null), []);

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  const v = useContext(AuthContext);
  if (v === null) {
    throw new Error('useAuth は AuthProvider の中でのみ呼び出してください');
  }
  return v;
}

import { AuthProvider, useAuth } from './AuthContext';

function LoginForm() {
  const { user, login, logout } = useAuth();

  if (user) {
    return (
      <div>
        <p>こんにちは、{user.name}さん!</p>
        <button onClick={logout}>ログアウト</button>
      </div>
    );
  }

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      const formData = new FormData(e.currentTarget);
      const name = formData.get('name');
      if (typeof name === 'string' && name.length > 0) login(name);
    }}>
      <input name="name" placeholder="名前" />
      <button type="submit">ログイン</button>
    </form>
  );
}

function App() {
  return (
    <AuthProvider>
      <LoginForm />
    </AuthProvider>
  );
}

export default App;