How to fix useContext cannot be called with multiple arguments in React

ReactBEGINNERMEDIUMUpdated Dec 10, 2025· 82 views

This error occurs when the useContext hook is called with more than one argument. useContext only accepts a single parameter—the context object created by React.createContext(). Developers often make this mistake by confusing useContext with other hooks like useState or useEffect that accept multiple arguments.

Quick fix

Fixes useContext cannot be called with multiple arguments

// ❌ Wrong - multiple arguments
const value = useContext(MyContext, defaultValue);
const value = useContext(MyContext, someOtherValue);
const value = useContext(MyContext, [dependencies]);
  1. Check your useContext call signature
  2. Remove any extra arguments
  3. Verify context creation and import
  4. Check for syntax errors creating multiple arguments
react — error
// ❌ Wrong - multiple arguments
const value = useContext(MyContext, defaultValue);
const value = useContext(MyContext, someOtherValue);
const value = useContext(MyContext, [dependencies]);
useContext cannot be called with multiple arguments

What this error means

The `useContext` hook is designed to read the current value of a React context. Its API is intentionally simple: it accepts exactly one argument—the context object you want to access. This error is thrown when you try to pass additional arguments, which React doesn't know how to handle. This is a common mistake for developers who are new to React hooks or who are confusing `useContext` with other hooks. For example, `useState` accepts an initial value, `useEffect` accepts a function and a dependency array, and `useMemo` accepts a function and dependencies. But `useContext` only needs the context object itself. The error serves as a helpful reminder that context values are accessed through the context object, not through additional parameters to the hook. If you need to pass additional data alongside context, you should structure your context value differently or use multiple context objects.

Typical symptoms

  • Error message: "useContext cannot be called with multiple arguments"
  • Build fails with a compilation error
  • Development server shows a red error overlay in the browser
  • TypeScript shows a type error about too many arguments
  • Component fails to render or crashes
  • Error appears immediately when component mounts
  • Works in some components but fails in others with similar useContext usage

Common causes

  1. Confusing useContext with useState and passing an initial value as second argument
  2. Trying to pass a default value to useContext (defaults belong in createContext, not useContext)
  3. Copy-pasting code from useEffect or useMemo examples without adapting for useContext
  4. Misreading the React documentation or tutorials
  5. Attempting to pass both context and a transformation function
  6. Syntax error with extra commas or parentheses creating multiple arguments
  7. Using array or object destructuring incorrectly in the argument position

How to fix "useContext cannot be called with multiple arguments"

1Check your useContext call signature

Look at the line where you're calling useContext. It should have exactly one argument inside the parentheses.

Incorrect:

jsx
// ❌ Wrong - multiple arguments
const value = useContext(MyContext, defaultValue);
const value = useContext(MyContext, someOtherValue);
const value = useContext(MyContext, [dependencies]);

Correct:

jsx
// ✅ Correct - single argument
const value = useContext(MyContext);

Count the arguments inside the parentheses. There should be only one.

2Remove any extra arguments

If you have additional arguments after the context object, remove them. useContext does not accept:
- Default values
- Dependency arrays
- Transformation functions
- Any other parameters

If you need a default value:

jsx
// Set default when creating context, not when using it
const MyContext = createContext(defaultValue); // ✅ Correct place for default

// Not here:
const value = useContext(MyContext, defaultValue); // ❌ Wrong

If you think you need dependencies:

jsx
// useContext doesn't have dependencies
// If you need to recompute based on dependencies, use useMemo:
const contextValue = useContext(MyContext);
const computedValue = useMemo(() => {
  return transform(contextValue, dependency);
}, [contextValue, dependency]); // ✅ useMemo has dependencies
3Verify context creation and import

Ensure your context is created correctly and imported consistently.

Correct context creation:

jsx
// contexts/MyContext.js
import { createContext } from 'react';

export const MyContext = createContext(defaultValue);
// or without default:
export const MyContext = createContext();

// Component.js
import { MyContext } from './contexts/MyContext';
import { useContext } from 'react';

function MyComponent() {
  const value = useContext(MyContext); // ✅ Single argument
  return <div>{value}</div>;
}

Common import mistakes:

jsx
// ❌ Wrong - importing createContext and useContext from different places
import { createContext } from 'react';
import { useContext } from 'some-other-library'; // Should be from 'react'

// ❌ Wrong - importing the wrong thing
import { MyContext } from './MyContext';
const value = useContext(MyContext.Provider); // Should be MyContext, not MyContext.Provider
4Check for syntax errors creating multiple arguments

Sometimes extra commas or parentheses can create multiple arguments unintentionally.

Syntax errors to check:

jsx
// ❌ Extra comma creates two arguments
const value = useContext(MyContext, ); // Trailing comma

// ❌ Parentheses in wrong place
const value = useContext((MyContext)); // Still one argument, but check for nested issues

// ❌ Array or object literal as argument
const value = useContext([MyContext]); // Array with one element
const value = useContext({ context: MyContext }); // Object with one property

// ❌ Function call that returns multiple values
const value = useContext(getContext()); // If getContext() returns array

Fix:

jsx
// ✅ Clean single argument
const value = useContext(MyContext);
5Use multiple useContext calls for multiple contexts

If you need values from multiple contexts, call useContext multiple times.

Correct pattern:

jsx
import { ThemeContext, UserContext, SettingsContext } from './contexts';

function MyComponent() {
  const theme = useContext(ThemeContext);
  const user = useContext(UserContext);
  const settings = useContext(SettingsContext);

  // Now you have all three values
  return (
    <div style={{ color: theme.primaryColor }}>
      Hello, {user.name}!
    </div>
  );
}

Create a custom hook for convenience:

jsx
function useAppContexts() {
  const theme = useContext(ThemeContext);
  const user = useContext(UserContext);
  const settings = useContext(SettingsContext);

  return { theme, user, settings };
}

function MyComponent() {
  const { theme, user, settings } = useAppContexts();
  // Single hook call, but internally uses multiple useContext calls
}
6Combine context values in the Provider, not the hook

If you find yourself wanting to pass additional data with context, consider combining values at the Provider level instead of trying to pass them to useContext.

Instead of:

jsx
// ❌ What you might be tempted to do
const value = useContext(MyContext, extraData); // Not possible

Do this:

jsx
// ✅ Combine values in Provider
function CombinedProvider({ children, extraData }) {
  const baseValue = useContext(BaseContext); // Get from another context

  const combinedValue = {
    ...baseValue,
    extraData,
    // Add computed properties
    computed: calculateSomething(baseValue, extraData)
  };

  return (
    <MyContext.Provider value={combinedValue}>
      {children}
    </MyContext.Provider>
  );
}

// Usage
function MyComponent() {
  const { baseValue, extraData, computed } = useContext(MyContext); // ✅ Single argument
}
7Test the fix

After making changes, verify the error is resolved:

jsx
// Simple test component
function TestComponent() {
  const value = useContext(MyContext); // Should work with single argument

  console.log('Context value:', value);

  return (
    <div>
      <p>Context is working!</p>
      <pre>{JSON.stringify(value, null, 2)}</pre>
    </div>
  );
}

// Wrap with Provider in your app
<MyContext.Provider value={{ test: 'data' }}>
  <TestComponent />
</MyContext.Provider>

Check the browser console. If you see your context data logged and no error overlay appears, the fix is successful.

Advanced notes

TypeScript Considerations:
TypeScript will catch this error at compile time if you have strict type checking enabled. The error will appear as Expected 1 arguments, but got 2 or similar.

Common Confusion Points:
1. useState(initialValue) vs useContext(context) - useState takes the initial value, useContext takes the context object
2. useEffect(effect, deps) vs useContext(context) - useEffect takes function and dependencies, useContext takes only context
3. useMemo(fn, deps) vs useContext(context) - useMemo takes function and dependencies, useContext takes only context

Performance Note:
useContext is optimized to be called with a single argument. Adding runtime checks for multiple arguments would add overhead to every useContext call. The error helps maintain performance while guiding correct usage.

Historical Context:
Before hooks, context was accessed via Context.Consumer render props or contextType in class components. The single-argument design of useContext aligns with the simplicity of the Consumer pattern while being more ergonomic.

Testing Strategy:
When writing tests for components that use useContext, mock the context value directly rather than trying to test the hook call itself. Use React Testing Library's wrapper option to provide context.

Frequently asked questions

What does "useContext cannot be called with multiple arguments" mean?
The useContext hook is designed to read the current value of a React context. Its API is intentionally simple: it accepts exactly one argument—the context object you want to access. This error is thrown when you try to pass additional arguments, which React doesn't know how to handle.
How do I fix "useContext cannot be called with multiple arguments"?
This error occurs when the useContext hook is called with more than one argument. useContext only accepts a single parameter—the context object created by React.createContext(). Developers often make this mistake by confusing useContext with other hooks like useState or useEffect that accept multiple arguments.
What causes "useContext cannot be called with multiple arguments"?
Confusing useContext with useState and passing an initial value as second argument Trying to pass a default value to useContext (defaults belong in createContext, not useContext) Copy-pasting code from useEffect or useMemo examples without adapting for useContext
Is the "useContext cannot be called with multiple arguments" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading