Context を使うと、すべての階層に props を渡すことなく（プロップドリリングなしで）、サブツリー全体に値を共有できます。context を作成し、サブツリーを Provider でラップすると、任意の子孫が useContext でそれを読み取れます。
jsx
= ();
() {
(
);
}
() {
theme = ();
;
}
多くのコンポーネントが必要とする、更新頻度の低い「グローバル的」なデータです：テーマ、現在のユーザー、ロケール、フィーチャーフラグ。
Provider の value が変わると、その context を消費するすべてのコンポーネントが再レンダリングされます。その一部だけを購読する方法はありません。実務上の帰結が 2 つあります：
// ❌ a NEW object every render → all consumers re-render every time
<Ctx.Provider value={{ user, setUser }}>
// ✅ memoize the value so it only changes when it really changes
const value = useMemo(() => ({ user, setUser }), [user]);
<Ctx.Provider value={value}>
頻繁に変化する状態や大きな状態については、context を小さな単位に分割するか、選択的な購読をサポートするストア（Zustand/Redux）を使いましょう。Context は依存性注入のためのツールであり、完全な状態マネージャーではありません。