useContext

公式ドキュメント ↗

const AccentContext = createContext(defaultColor);

<AccentContext.Provider value={accent}>
  <App /> {/* この中のどこでuseContextしてもよい */}
</AccentContext.Provider>;

// 奥にあるどのコンポーネントでも
const accent = useContext(AccentContext);

propsのバケツリレー vs Context

const ColorContext = createContext(defaultColor);

// Level1
<ColorContext.Provider value={color}>
  <Level2 />
</ColorContext.Provider>;

// Level3 (Level2はcolorを知らなくていい)
const color = useContext(ColorContext);

Level1→Level2→Level3という3階層。Level2は色を一切使わないのに、propsで渡す左側だけは中継させられている。深い階層の途中に「使わないのに右から左へ渡すだけ」のpropsが増えていくのがバケツリレー。Contextを使えば、間の階層を一切気にせず、必要な場所だけで値を取り出せる。

値が変わると、読んでいる全員が描き直される

<CountContext.Provider value={count}>
  <ConsumerA />
  <ConsumerB />
  <ConsumerC />
</CountContext.Provider>;

// 各Consumerの中で
const count = useContext(CountContext);

3つの消費コンポーネントはmemo化済み。「関係ない状態を更新」では描き直された回数が増えないが、「Contextの値を+1」を押すと3つとも同時に増える。Contextの値が変わると、useContextでそれを読んでいる全てのコンポーネントが描き直される。関係ない値まで1つのContextに詰め込むと、無関係な変更でも全員が描き直されてしまう点に注意。