問題一覧に戻る
中級Context API
問題72: 複数のContext

異なるデータを管理するために複数のContextを使用する方法を学びます。関心の分離により、テーマ、ユーザー情報、設定などを別々のContextで管理できます。複数のProviderをネストして使用し、必要なContextのみを購読することで、不要な再レンダリングを避けられます。大規模アプリケーションでは、Contextを機能別に分割することがパフォーマンス最適化につながります。

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

// 複数のContext
const ThemeContext = ('light');
const UserContext = ({ name: 'Guest' });

function Profile() {
  // 複数消費
  const theme = (ThemeContext);
  const user = (UserContext);
  
  return (
    <div style={{ color: theme === 'dark' ? 'white' : 'black' }}>
      {user.name}
    </div>
  );
}

function App() {
  return (
    // ネストされたProvider
    <.Provider value="dark">
      <.Provider value={{ name: 'Taro' }}>
        <Profile />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

export default App;