問題一覧に戻る
中級Context API
問題73: Context更新

Contextで状態と更新関数を提供し、動的なContext値を実現する方法を学びます。useStateと組み合わせて、値とsetter関数をContextで共有します。これにより、子コンポーネントからグローバルな状態を更新できます。ステート管理ライブラリの代替として、中小規模のアプリケーションで有効なパターンです。

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

// 更新可能なContext
const CountContext = ();

function Counter() {
  // 値とsetterを消費
  const { count, setCount } = ();
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

function App() {
  const [count, setCount] = useState(0);
  
  return (
    // 状態とsetterを提供
    <CountContext. value={{ ,  }}>
      <Counter />
    </CountContext.>
  );
}

export default App;