useContextで値を共有する方法

複数のコンポーネント間で状態や関数などの値を共有したい場合に、useContext と createContext を使うことで、Propsを深くネストせずに簡潔に受け渡しが可能です。

🧠 コンテキストの構造

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

type UserContextType = {
  name: string;
  setName: (name: string) => void;
};

const UserContext = createContext<UserContextType | undefined>(undefined);

export const UserProvider = ({ children }: { children: ReactNode }) => {
  const [name, setName] = useState('匿名ユーザー');
  return (
    <UserContext.Provider value={{ name, setName }}>
      {children}
    </UserContext.Provider>
  );
};

// カスタムフックとして提供
export const useUser = (): UserContextType => {
  const context = useContext(UserContext);
  if (!context) throw new Error('useUser must be used within a UserProvider');
  return context;
};

🎁 値の受け取り：子コンポーネント側

// components/ShowUser.tsx
import { useUser } from '../context/UserContext';

export const ShowUser = () => {
  const { name } = useUser();
  return 
<p>現在のユーザー：{name}</p>;
};

✏️ 値の更新：別のコンポーネントから変更

// components/UpdateUser.tsx
import { useUser } from '../context/UserContext';

export const UpdateUser = () => {
  const { setName } = useUser();
  return (
    <button onClick={() => setName('渡邊 拓磨')}>
      ユーザー名を変更
    </button>
  );
};

🧩 アプリ全体にContextを適用

// App.tsx
import { UserProvider } from './context/UserContext';
import { ShowUser } from './components/ShowUser';
import { UpdateUser } from './components/UpdateUser';

export const App = () => {
  return (

<UserProvider>
      <ShowUser />
      <UpdateUser />
    </UserProvider>
  );
};