問題一覧に戻る
中級Context API
問題71: useContext基礎

useContextフックを使用してContextの値を取得し、購読の仕組みを学びます。useContextはContextの現在値を返し、値が変更されると自動的に再レンダリングされます。Consumerコンポーネントよりもシンプルな構文で使用できます。ネストされたProviderがある場合は、最も近いProviderの値が使用されます。言語設定、テーマ、認証情報などのグローバルな状態管理に活用できます。

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

// Context作成
const LangContext = ({ lang: 'ja' });

function Header() {
  // Contextを消費
  const { lang } = (__);
  
  return <h1>{lang === 'ja' ? 'こんにちは' : 'Hello'}</h1>;
}

function App() {
  return (
    // Contextを提供
    <.Provider value={{ lang: 'en' }}>
      <Header />
    </>
  );
}

export default App;