ReactのuseContextでグローバルな状態管理

ReactのuseContextでできること

ReactのuseContextフックは、Reactアプリケーションでグローバルな状態管理やテーマの切り替えなどに非常に役立ちます。
具体的には、次のようなことができます：

1. グローバルな状態管理:
useContextを使用して、複数のコンポーネントで同じデータを共有できます。
例えば、ログイン状態や言語設定などの情報を、Contextを介してどのコンポーネントからでもアクセス可能にします。

// Example of using useContext for global state management
import React, { useContext } from 'react';

// Create a context
const UserContext = React.createContext();

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

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

// Child component consuming the context
function UserProfile() {
 const { user } = useContext(UserContext);

 return (
   <div>
     {user ? (
       <p>Welcome, {user.name}!</p>
     ) : (
       <p>Please log in.</p>
     )}
   </div>
 );
}

2. テーマの切り替え:
useContextを使って、アプリケーション全体のテーマを切り替えることができます。
例えば、ライトモードとダークモードをユーザーが選択できるようにする場合に役立ちます。

// Example of using useContext for theme switching
import React, { useContext } from 'react';

const ThemeContext = React.createContext();

function ThemeProvider({ children }) {
 const [theme, setTheme] = useState('light');

 const toggleTheme = () => {
   setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
 };

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

function ThemeSwitcher() {
 const { theme, toggleTheme } = useContext(ThemeContext);

 return (
   <button onClick={toggleTheme}>
     Switch to {theme === 'light' ? 'dark' : 'light'} mode
   </button>
 );
}

3. 複数のContextの使用:
複数のuseContextフックを組み合わせて、異なるコンテキストから情報を取得することも可能です。

ThemeProvider

// ThemeContext.js
import React, { createContext, useState } from 'react';

const ThemeContext = createContext();

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

 const toggleTheme = () => {
   setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
 };

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

export default ThemeContext;

UserProvider

// UserContext.js
import React, { createContext, useState } from 'react';

const UserContext = createContext();

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

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

export default UserContext;

AppコンポーネントでそれぞれのProviderを使って状態を管理します。

import React from 'react';
import { ThemeProvider } from './ThemeContext';
import { UserProvider } from './UserContext';
import UserProfile from './UserProfile';
import ThemeSwitcher from './ThemeSwitcher';

const App = () => {
 return (
   <ThemeProvider>
     <UserProvider>
       <div>
         <h1>My App</h1>
         <UserProfile />
         <ThemeSwitcher />
       </div>
     </UserProvider>
   </ThemeProvider>
 );
};

export default App;

各コンポーネントで必要なコンテキストをuseContextフックを使って取得し、それに基づいてContextを更新。

// ThemeSwitcher.js
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

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

 return (
   <button onClick={toggleTheme}>
     Switch to {theme === 'light' ? 'dark' : 'light'} mode
   </button>
 );
};

export default ThemeSwitcher;

// UserProfile.js
import React, { useContext } from 'react';
import UserContext from './UserContext';

const UserProfile = () => {
 const { user } = useContext(UserContext);

 return (
   <div>
     {user ? (
       <p>Welcome, {user.name}!</p>
     ) : (
       <p>Please log in.</p>
     )}
   </div>
 );
};

export default UserProfile;

このようにすることで、Appコンポーネントで複数のProviderを使用し、それぞれのコンポーネントで必要な状態を管理できます。
各コンポーネントは必要なコンテキストをuseContextを使って直接取得し、その状態に基づいてUIを更新することができます。
useContextは、特定のコンテキストを介してコンポーネント間でデータを効率的に共有する方法を提供するため、大規模なアプリケーション開発で特に強力です。