React Hooks早わかり(useContext編)

useContext 概要

何らかのデータが、ネストレベルの異なる多くのコンポーネントからアクセスできる必要がある時に使用される。
公式リファレンス
https://ja.reactjs.org/docs/hooks-reference.html#usecontext
わかりやすかった記事
https://reffect.co.jp/react/react-usecontext-understanding

useContext を利用する利点

• 複数コンポーネントで同じステートを簡単に共有できる。
• ステート、イベントハンドラを一元管理できる。
• 全てのコンポーネントを明示的に通すことなしに、コンポーネントツリーの深くまで値を渡せる。
• アプリケーション内の多くのコンポーネントから必要とされる特定のタイプのプロパティ
  • （例： ロケール設定、UI テーマなど）で使用するのがオススメ

import { VFC, createContext, useContext, useState } from "react";

// Contextを作成する。
export const UserCountContext = createContext(
　　　　{} as {
　　　　　　　　count: number;
　　　　　　　　setCount: React.Dispatch<React.SetStateAction<number>>;
　　　　}
);

// UseContextSampleのStateを子のコンポーネントに渡す
export const UseContextSample: VFC = () => {
　　　　const [count, setCount] = useState(100);
　　　　const value = {
　　　　　　　　count,
　　　　　　　　setCount,
　　　　};

　　　　 return (
　　　　　　　　<div style={{ textAlign: "center" }}>
　　　　　　　　　　　　<h1>useContext sample</h1>
　　　　　　　　　　　　{/* 値を渡したいコンポーネントをcontext.Providerで囲む */}
　　　　　　　　　　　　<UserCountContext.Provider value={value}>
　　　　　　　　　　　　　　　　<ComponentA />
　　　　　　　　　　　　</UserCountContext.Provider>
　　　　　　　　　　　　<hr />
　　　　　　　　</div>
　　　　　　　　);
};
	

const ComponentA: VFC = () => {
　　　　return (
　　　　　　　　<>
　　　　　　　　　　　　<p>Component A</p>
　　　　　　　　　　　　<ComponentB />
　　　　　　　　</>
　　　　);
};
	

const ComponentB: VFC = () => {
　　　　return (
　　　　　　　　<>
　　　　　　　　　　　　<p>Component B</p>
　　　　　　　　　　　　<ComponentC />
　　　　　　　　</>
　　　　);
};
	

const ComponentC: VFC = () => {
　　　　// useContextで値を受け取り、使用することができる。
　　　　const { count, setCount } = useContext(UserCountContext);
　　　　return (
　　　　　　　　<>
　　　　　　　　　　　　<p>Component C</p>
　　　　　　　　　　　　<p>{count}</p>
　　　　　　　　　　　　<button onClick={() => setCount((prev) => prev + 1)}>+</button>
　　　　　　　　</>
　　　　);
};
export default UseContextSample;