⚛️ React Context Default Values

React Context Default Value

? Quick Overview

Every React Context can have a default value — a fallback that is used when a component consuming the context does not have a matching Provider above it in the component tree.

This ensures that your app can still work or display a placeholder value even if the Provider is missing. The default value comes from React.createContext(defaultValue).

? Key Concepts

• Default value is the argument passed to createContext(defaultValue).
• It is used only when there’s no matching Provider above the component in the tree.
• Provider value overrides the default value whenever a Provider is present.
• Default values can be simple types (like strings) or objects with properties and functions.
• Defaults are great for fallback UI, testing, and safe behavior.

? Syntax & Theory

You create a context and give it a default value using:

// Creating a context with a default value
import { createContext } from "react";

const MyContext = createContext("default value");

export default MyContext;

• "default value" will be returned by useContext(MyContext) if there is no Provider.
• If a <MyContext.Provider value="something"> exists above the consumer, that value is used instead.

? ThemeContext: Default Value Example

Here we define a ThemeContext with a default value "light".

// ThemeContext.js with default value "light"
import { createContext } from "react";

const ThemeContext = createContext("light");

export default ThemeContext;

If no Provider is used, any component consuming ThemeContext will receive the string "light".

? Example Without Provider

In this example, we read from ThemeContext but do not wrap the component tree in a ThemeContext.Provider.

// App.js using ThemeContext without a Provider
import React, { useContext } from "react";
import ThemeContext from "./ThemeContext";

function App() {
  const theme = useContext(ThemeContext);
  return <h4>Theme: {theme}</h4>;
}

export default App;

// Output when no Provider is used
Theme: light

? Example With Provider

Now we wrap part of the component tree with ThemeContext.Provider and pass "dark" as the value. This overrides the default value.

// App.js using ThemeContext with a Provider
import React, { useContext } from "react";
import ThemeContext from "./ThemeContext";

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Child />
    </ThemeContext.Provider>
  );
}

function Child() {
  const theme = useContext(ThemeContext);
  return <h4>Theme: {theme}</h4>;
}

export default App;

// Output when Provider value is "dark"
Theme: dark

? Default Value with Object

Context values are often objects instead of simple strings. You can safely provide a default object with dummy values and functions:

// AuthContext.js with an object default value
import { createContext } from "react";

const AuthContext = createContext({
  user: null,
  login: () => console.log("Default login called"),
  logout: () => console.log("Default logout called")
});

export default AuthContext;

This allows components to call login() or logout() safely even if no Provider is present — which is especially useful for testing and fallback scenarios.

? When Are Default Values Used?

• When a component uses useContext() but isn’t wrapped in the corresponding Provider.
• When writing tests and you don’t want to manually provide all contexts.
• For fallback UI or safe defaults (e.g., default theme, language, or empty user).

? Summary