useContext()

useContext()はグローバルな状態を関数コンポーネント内で簡単に取得するためのフックです。

複数のコンポーネント間で共通のデータ（テーマ、ユーザー情報、言語など）を共有したいときに便利です。

使用例1:テーマの切り替え

// ThemeContext.tsx
import { createContext, useState, ReactNode } from 'react';

type Theme = 'light' | 'dark';

export const ThemeContext = createContext<{
  theme: Theme;
  toggleTheme: () => void;
}>({ theme: 'light', toggleTheme: () => {} });

export const ThemeProvider = ({ children }: { children: ReactNode }) => {
  const [theme, setTheme] = useState<Theme>('light');

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

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

// App.tsx
import { ThemeProvider } from './ThemeContext';
import Child from './Child';

const App = () => (
  <ThemeProvider>
    <Child />
  </ThemeProvider>
);

// Child.tsx
import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const Child = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <>
      <div>テーマ: {theme}</div>
      <button onClick={toggleTheme}>テーマ切替</button>
    </>
  );
};

使用例2: ユーザー認証

AuthContextの作成

// AuthContext.tsx
import { createContext, useState, ReactNode, useContext } from 'react';

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

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

const AuthContext = createContext<AuthContextType>({
  user: null,
  login: () => {},
  logout: () => {},
});

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

  const login = (newUser: User) => setUser(newUser);
  const logout = () => setUser(null);

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

// 便利なカスタムフック
export const useAuth = () => useContext(AuthContext);

App全体にProviderを設定

// App.tsx
import { AuthProvider } from './AuthContext';
import Profile from './Profile';
import LoginButton from './LoginButton';

const App = () => (
  <AuthProvider>
    <h1>認証付きアプリ</h1>
    <LoginButton />
    <Profile />
  </AuthProvider>
);

ログイン・ログアウト操作

// LoginButton.tsx
import { useAuth } from './AuthContext';

const LoginButton = () => {
  const { user, login, logout } = useAuth();

  const handleLogin = () => {
    login({ id: 1, name: 'John Doe' });
  };

  return user ? (
    <button onClick={logout}>ログアウト</button>
  ) : (
    <button onClick={handleLogin}>ログイン</button>
  );
};

ユーザー情報の表示

// Profile.tsx
import { useAuth } from './AuthContext';

const Profile = () => {
  const { user } = useAuth();

  return (
    <div>
      {user ? (
        <p>ようこそ、{user.name} さん</p>
      ) : (
        <p>ログインしてください</p>
      )}
    </div>
  );
};