基本のuseStateを使う」では、基本のフックuseStateで状態をコンポーネントにもたせました。親コンポーネントに状態をまとめれば、子コンポーネントから参照することはできます。できれば状態やロジックは、要素の表示やインタフェースとは分けたいところです。useContextフックを用いれば、この切り分けができます。作例は引き続きカウンターです(図001)。前回書いたコード(サンプル002)に手を加えていきましょう。createContextとuseContextを使うコンテクストは、まずcreateContext()関数でつくらなければなりません。戻り値のコンテクストオブジェクトに状態が収められます。createContext(状態の初期値);そして、コンテクストオブジェクトに備わるのが、プロバイダ(Provider)コンポーネントです。JSXコードでこのプロバイダコンポーネントに含めた子コンポーネントが、コンテキストの状態を参照できます。子コンポーネントに参照させる値は、プロバイダのvalueプロパティに加えてください。--></コンテキスト.Provider>ロジック分けの前に、createContext()の使い方を理解しましょう。コンテキストは、アプリケーションモジュール(src/App.js)からつぎのように関数を呼び出してつくります。状態の参照はプロバイダコンポーネントからvalueプロパティで渡しますので、カウンターコンポーネント(CounterDisplay)のプロパティはもう要りません。/></div></AppContext.Provider>);}これでようやく、useContextフックが使えるようになりました。アプリケーション(App)からコンテキスト(AppContext)をカウンターのコンポーネント(src/CounterDisplay.js)にimportして呼び出すと、返されるのがプロバイダから与え得られたvalueプロパティの現在値を収めたオブジェクトです。useContext(AppContext);};コンテキストはアプリケーションモジュール(src/App.js)につくったので、まだロジックは分離されていません。これで切り分ける準備は整ったということです。カウンターのモジュールの記述とともに、つぎのコード001にまとめます。併せて、CodeSandboxにサンプル001を公開しました。カスタムのコンテキストコンポーネントにロジックを移すいよいよ、ロジックをアプリケーションモジュール(src/App.js)から、新たなコンテキストのコンポーネントに移します。ロジックとコンテキスト生成のコードは、コンポーネントから除いてください。*/}コンテキストの新たなコンポーネント(src/AppContext.js)の記述はつぎのコード002のとおりです。ロジックは、アプリケーション(App)からほぼそのまま移せば構いません。ひとつ大事なのは、子コンポーネントが含められるようにプロバイダを返すことです。そのために、プロパティchildrenを受け取り、子要素として加えました。}}>{children}</AppContext.Provider>);};改めて、アプリケーションモジュール(src/App.js)は、新たなコンテキストコンポーネント(AppContext')のプロバイダ(AppProvider)で、子コンポーネントを包みます。カウンターのコンポーネント(src/CounterDisplay.js)も、useContextに渡すコンテキスト(名前は同じAppContextにしました)を差し替えてください。useContext(AppContext);}これで、ロジックはコンテキストのコンポーネント(AppContext)に切り分けられました(前掲コード002)。つぎのコード003のとおり、アプリケーションモジュール(src/App.js)はプロバイダコンポーネント(AppProvider)をただ差し込み、カウンターのコンポーネント(src/CounterDisplay.js)は前掲コード001と変わらずコンテキストから与えられた参照を使うだけです。それぞれのモジュールの記述は、CodeSandboxに掲げた以下のサンプル002でお確かめください。