Default Context Value

In React Context, the default context value is the fallback returned by `useContext` when no matching provider exists above the consuming component. It is defined when creating the context and does not replace a provider whose value happens to be `undefined`.

A context is created with a default value, such as `createContext("light")`. A component that calls `useContext` receives the nearest matching provider's value when one exists.

If no matching provider is present in the component's ancestry, React returns the context's default value. This makes the default useful as a fallback and can also make isolated component tests easier.

The default is not dynamically inherited from another component. It is the value associated with the context itself and is used only when there is no matching provider above the consumer.

A provider explicitly supplying `undefined` is different from having no provider. In that case, the consumer receives `undefined`, not the context's default value.

For application code, choose a default that matches the context's intended contract. If a provider is required, another approach is to use a sentinel value or a custom hook that throws when the required provider is missing.

Key points

• `useContext` returns the default when no matching provider exists above the consumer.
• The default is supplied to `createContext`.
• An explicit provider value of `undefined` does not cause the default to be used.
• The nearest matching provider takes precedence over the default.
• Defaults can be useful for safe fallbacks and isolated tests.

Interview questions

Why might you give a context a meaningful default instead of `null`?

A meaningful default can make a consumer behave sensibly when it is rendered without a provider. It can also simplify isolated tests and component previews. However, if the provider is mandatory, a permissive default may hide configuration mistakes. In that situation, a deliberate sentinel or throwing custom hook can make missing-provider errors explicit.

What is the default value in React Context?

It is the fallback value specified when the context is created. A consumer receives it when there is no matching provider above that consumer. For example, `createContext("light")` gives `useContext` a fallback of `"light"`. It does not override values supplied by providers.

What happens when a component calls `useContext` without a provider?

React returns the context's default value. The default comes from the argument passed to `createContext`. This allows a consumer to have a fallback even when it is rendered outside the normal provider tree. Whether that fallback is appropriate depends on the context's contract.

If a provider passes `undefined`, will React use the context default?

No. An explicit provider is still present, so its supplied value is what the consumer receives. If that value is `undefined`, `useContext` returns `undefined`. The context default is specifically the fallback for the absence of a matching provider.