最終更新:2022-09-22 (木) 14:32:39 (73d)  

useContext
Top / useContext

const value = useContext(MyContext);

https://ja.reactjs.org/docs/hooks-reference.html#usecontext

概要

  • コンテクストオブジェクト(React.createContext からの戻り値)を受け取り、そのコンテクストの現在値を返します
  • コンテクストの現在値は、ツリー内でこのフックを呼んだコンポーネントの直近にある <MyContext?.Provider> の value の値によって決定されます。

レンダリング

  • 直近の <MyContext?.Provider> が更新された場合、このフックはその MyContext? プロバイダに渡された最新の value の値を使って再レンダーを発生させます。
  • 祖先コンポーネントが React.memo や shouldComponentUpdate? を使っている場合でも、useContext を使っているコンポーネント自体から再レンダーが発生します。

使い方

定義

参照する値を設定

  • どの値を提供したい値をContext.Providerで指定 (JSX)

参照

React.createContext

useContext

メモ

  • useContext(MyContext?) は現在のコンテクストの値を読み取り、その変化を購読することしかできません。コンテクストの値を設定するために、今後もツリーの上の階層で <MyContext?.Provider> が必要です。

関連