How to fix createContext: expected a default value parameter in React

ReactBEGINNERLOWUpdated Dec 9, 2025· 92 views

React.createContext() requires a default value argument, but was called with no parameters. This TypeScript error occurs when createContext is invoked without providing the required defaultValue parameter.

Quick fix

Fixes TS2554

// Before (causes error)
const MyContext = React.createContext();

// After (fixed - using null)
const MyContext = React.createContext(null);

// Or with a meaningful default
const ThemeContext = React.createContext('light');

// Or for complex types
const UserContext = React.createContext({
  name: 'Guest',
  isLoggedIn: false
});
  1. Add a default value to createContext()
  2. Use TypeScript union types for null defaults
  3. Create a custom hook with runtime validation
  4. Use non-null assertion for required contexts (TypeScript)
react — error
// Before (causes error)
const MyContext = React.createContext();
// After (fixed - using null)
const MyContext = React.createContext(null);
// Or with a meaningful default
const ThemeContext = React.createContext('light');
// Or for complex types
const UserContext = React.createContext({
  name: 'Guest',
  isLoggedIn: false
});
createContext: expected a default value parameter

What this error means

This error occurs when you call React.createContext() without providing the required default value parameter. The createContext function expects exactly one argument: a default value that will be used when a component tries to consume the context but there is no matching Provider in the component tree above it. In TypeScript projects, this manifests as a compile-time error "TS2554: Expected 1 arguments, but got 0." In JavaScript projects, while it may not immediately fail, omitting the default value parameter goes against React's API contract and can lead to unexpected behavior. The default value serves as a fallback and is only used when React can't find a matching context provider in the tree above the component that reads the context. Even if you plan to always wrap your context consumers with a Provider, React's API requires you to provide this parameter explicitly.

Typical symptoms

  • TypeScript compilation fails with "Expected 1 arguments, but got 0" error
  • IDE shows red squiggly underlines under createContext() call
  • Error message specifically mentions "expected a default value parameter"
  • Code works in JavaScript but fails when migrating to TypeScript
  • Build process fails during type checking phase

Common causes

  1. Called React.createContext() with empty parentheses: createContext()
  2. Forgot to provide any argument when creating a new context
  3. Mistakenly assumed the default value parameter is optional
  4. Copied code examples that omitted the parameter for brevity
  5. Migrated from JavaScript to TypeScript without updating context creation

How to fix "createContext: expected a default value parameter"

1Add a default value to createContext()

The simplest fix is to provide a default value that matches your context's type. If you don't have a meaningful default, pass null or undefined:

typescript
// Before (causes error)
const MyContext = React.createContext();

// After (fixed - using null)
const MyContext = React.createContext(null);

// Or with a meaningful default
const ThemeContext = React.createContext('light');

// Or for complex types
const UserContext = React.createContext({
  name: 'Guest',
  isLoggedIn: false
});

This immediately resolves the TypeScript error and satisfies React's API requirements.

2Use TypeScript union types for null defaults

If you don't have a meaningful default value and want to use null, update your type definition to allow for null:

typescript
interface UserContextType {
  username: string;
  email: string;
}

// Create context with null and union type
const UserContext = createContext<UserContextType | null>(null);

This approach is type-safe and makes it clear that the context value might be null when no provider is present.

3Create a custom hook with runtime validation

For contexts that should always be provided, create a custom hook that throws a helpful error if used outside a provider:

typescript
interface AuthContextType {
  user: { id: string; name: string } | null;
  login: (credentials: any) => Promise<void>;
  logout: () => void;
}

const AuthContext = createContext<AuthContextType | null>(null);

// Custom hook with validation
export function useAuth() {
  const context = useContext(AuthContext);

  if (!context) {
    throw new Error(
      'useAuth must be used within an AuthProvider. ' +
      'Wrap your component with <AuthProvider>.'
    );
  }

  return context;
}

// Usage
function MyComponent() {
  const { user, login, logout } = useAuth(); // Type-safe, no null checks needed
  // ...
}

This pattern provides both type safety and helpful runtime errors during development.

4Use non-null assertion for required contexts (TypeScript)

If you're certain the context will always be provided in your app, you can use TypeScript's non-null assertion operator:

typescript
interface SidebarContextType {
  isOpen: boolean;
  toggle: () => void;
}

// Using undefined! tells TypeScript the value won't be undefined at runtime
const SidebarContext = createContext<SidebarContextType>(undefined!);

Warning: This approach bypasses TypeScript's safety checks. Only use it when you're absolutely certain every consumer will be wrapped in a provider. The custom hook approach from Step 3 is generally safer.

Advanced notes

Why React requires a default value:

React's context system needs a default value for two reasons:
1. Type inference: The default value helps TypeScript infer the context's type
2. Fallback behavior: If a component uses useContext() outside a Provider, it receives this default value instead of crashing

Best practices for default values:

- For optional contexts: Use null or undefined and handle accordingly in consumers
- For required contexts: Use the custom hook pattern with runtime validation
- For development: Consider using a Symbol or unique object as the default to detect improper usage:

typescript
const REQUIRED_CONTEXT = Symbol('REQUIRED_CONTEXT');

const MyContext = createContext<MyType | typeof REQUIRED_CONTEXT>(REQUIRED_CONTEXT);

function useMyContext() {
  const value = useContext(MyContext);
  if (value === REQUIRED_CONTEXT) {
    throw new Error('MyContext must be provided');
  }
  return value;
}

React 18+ considerations:

In React 18 and newer versions, the requirement for a default value remains unchanged. Even with concurrent features and automatic batching, createContext() still expects exactly one argument.

Performance note:

The default value is only used when no Provider is found. Once wrapped in a Provider, React uses the provided value, so the default value's complexity doesn't impact runtime performance.

Frequently asked questions

What does "TS2554" mean?
createContext() without providing the required default value parameter. The createContext function expects exactly one argument: a default value that will be used when a component tries to consume the context but there is no matching Provider in the component tree above it. " In JavaScript projects, while it may not immediately fail, omitting the default value parameter goes against React's API contract and can lead to unexpected behavior.
How do I fix "TS2554"?
React.createContext() requires a default value argument, but was called with no parameters. This TypeScript error occurs when createContext is invoked without providing the required defaultValue parameter.
What causes "TS2554"?
Called React.createContext() with empty parentheses: createContext() Forgot to provide any argument when creating a new context Mistakenly assumed the default value parameter is optional
Is the "TS2554" error serious?
It is a low-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading