【React】そのProvider、実は要らないかも？

結論：Providerは無くてもContextのdefaultValueなら参照できる

結論から言ってしまうと、Provider無くてもdefaultValueなら参照できます。
なのでReact Contextに定数を渡す場合、Providerは省略可能です。
その内容のツイートがこちら👇

https://twitter.com/DavidKPiano/status/1535976454353215489?s=20&t=0wP0skZFW1Jvr0__tWmP2g

試してみる

👇CodeSandbox

https://codesandbox.io/s/no-provider-react-context-obhtgu?file=/src/index.js

import { StrictMode, createContext, useContext } from "react";
import { createRoot } from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

// 適当なContextにdefaultValueを渡す
const SomeContext = createContext("no provider")

function App() {
  // Providerが無くてもvalue === "no provider"
  const value = useContext(SomeContext)
  return <div>{value}</div>
}

このように createContext に渡したdefaultValueはProviderが無くてもアクセス可能です。

活用方法

一例としてAxios Instanceのように参照が変わらない性質の値で、環境によって異なるものを渡したい場合（依存注入が活きる場合）に効果を発揮すると思います。（そもそもProvider有り無し関係なく正しい使い方ですけど）

グローバル定数を何でもかんでもContextに包んで都度Consumeするのは、直接importするよりは結合度を下げられるメリットはあるものの、ちょっと考え物かなぁ。。。ぜひ皆さんのご意見、コメントお待ちしています。