React.createContextのポイントはdefaultValue？

質問

について React 16 Context doc ページ を見ると、これに似た例があります。

const defaultValue = 'light';
const SomeContext = React.createContext(defaultValue);

const startingValue = 'light';
const App = () => (
  <SomeContext.Provider theme={startingValue}>
    Content
  </SomeContext.Provider>
)

defaultValueの意味がないように思えるのは、代わりに startingValue を他の何かに設定したり、設定しなかったりすると（これは undefined を設定しない場合)、それを上書きしてしまいます。それはいいんです、そうすべきなんです。

しかし、それなら何のために defaultValue ?

もし、変化しない静的なコンテキストを持ちたいのであれば、以下のようにして、Providerが単に defaultValue

const App = () => (
  <SomeContext.Provider>
    Content
  </SomeContext.Provider>
)

どのように解決するのですか？

Providerがない場合、関数createContextにはdefaultValueの引数が使用されます。これは、コンポーネントをラップせずに単体でテストしたり、Providerと異なる値でテストするのに便利です。

コードサンプルです。

import { createContext, useContext } from "react";

const Context = createContext( "Default Value" );

function Child() {
  const context = useContext(Context);
  return <h2>Child1: {context}</h2>;
}

function Child2() {
  const context = useContext(Context);
  return <h2>Child2: {context}</h2>;
}

function App() {

  return (
    <>
      <Context.Provider value={ "Initial Value" }>
        <Child /> {/* Child inside Provider will get "Initial Value" */}
      </Context.Provider>
        <Child2 /> {/* Child outside Provider will get "Default Value" */}
    </>
  );
}

コード・サンド・ボックス・デモ