Chapter 07

<Context.Provider>の非推奨化

uhyo
uhyo
2024.05.27に更新

React 19のちょっとした変更点として、Context.Providerが非推奨化されました(正確に言うと、将来のバージョンで非推奨になると予告されました)。

React 19では、Context.ProviderではなくContextそのものをProviderとして使うことができます。

// これまでの書き方
<Context.Provider value={value}>
  <Child />
</Context.Provider>

// 新しい書き方
<Context value={value}>
  <Child />
</Context>

改めて考えてみれば、この変更は自然なことのように思えます。

Contextの機能が導入された当時、Context.ProviderContext.Consumerと対になっていました。しかし、useContextの登場により、useContext(Context)で値を読みだせるようになったため、Context.Consumerは役目を終えました。

現在は、Context.Providerは使うのにContext.Consumerは使わないという非対称的な状態になっていました。今回の変更は、それならContext.Providerも使わなくていいようにしようという方向性なのでしょう。

今回の変更により、供給側は<Context>、使用側はuseContext(Context)となり、再び対称的な感じが戻ってきました。ちなみに、React 19からはuseを使ってuse(Context)でも可能です。