How to fix useContext must be called inside a function component in React

ReactBEGINNERMEDIUMUpdated Dec 10, 2025· 95 views

This error occurs when you try to call the useContext Hook outside of a React function component or custom Hook. React Hooks have strict rules about where they can be called, and violating these rules leads to this runtime error.

Quick fix

Fixes useContext must be called inside a function component

// ✅ Correct
import { useContext } from 'react';

function MyComponent() {
  const theme = useContext(ThemeContext); // Top level
  // ... rest of component
}

// ❌ Incorrect
function MyComponent() {
  if (condition) {
    const theme = useContext(ThemeContext); // Inside condition
  }
}

Move the useContext call to the top level of your function component
Extract logic that needs context into a custom Hook
Check for conditional or loop placement
Convert class components to function components if needed

react — error

$// ✅ Correct
import { useContext } from 'react';
function MyComponent() {
  const theme = useContext(ThemeContext); // Top level
  // ... rest of component
}
// ❌ Incorrect
function MyComponent() {
  if (condition) {
    const theme = useContext(ThemeContext); // Inside condition
  }
}
useContext must be called inside a function component

What this error means

The useContext Hook is part of React's Hooks API, which allows you to use React features like context in function components. Hooks must be called at the top level of a React function component or a custom Hook. Calling useContext outside these valid locations breaks the Rules of Hooks and causes React to throw this error. React enforces this rule because Hooks rely on the component's render cycle to manage state and side effects properly. When you call a Hook outside a component, React cannot associate it with a specific component instance, leading to unpredictable behavior.

Typical symptoms

You see the error message: "useContext must be called inside a function component" in your console
The application crashes or fails to render when trying to access context
The error occurs in a utility function, event handler, or class component method
Context values appear as undefined even when providers are correctly set up

Common causes

Calling useContext inside a regular JavaScript function that is not a React component or custom Hook
Placing useContext inside a conditional statement, loop, or nested function
Using useContext in a class component (which does not support Hooks)
Attempting to call useContext inside an event handler or useEffect cleanup function
Placing useContext after an early return statement in a component

How to fix "useContext must be called inside a function component"

1Move the useContext call to the top level of your function component

Ensure that useContext is called directly inside the body of your function component, before any conditional returns or loops.

jsx

// ✅ Correct
import { useContext } from 'react';

function MyComponent() {
  const theme = useContext(ThemeContext); // Top level
  // ... rest of component
}

// ❌ Incorrect
function MyComponent() {
  if (condition) {
    const theme = useContext(ThemeContext); // Inside condition
  }
}

2Extract logic that needs context into a custom Hook

If you need to use context in a reusable way, create a custom Hook that calls useContext. Custom Hooks are allowed to call other Hooks.

jsx

// ✅ Create a custom Hook
function useTheme() {
  const theme = useContext(ThemeContext);
  return theme;
}

// Then use it in your component
function MyComponent() {
  const theme = useTheme(); // This works
}

3Check for conditional or loop placement

Never call useContext inside if statements, for loops, or other conditional blocks. Move the Hook call outside.

jsx

// ✅ Correct
function MyComponent({ shouldUseTheme }) {
  const theme = useContext(ThemeContext);
  const className = shouldUseTheme ? theme.className : 'default';

  // ...
}

// ❌ Incorrect
function MyComponent({ shouldUseTheme }) {
  if (shouldUseTheme) {
    const theme = useContext(ThemeContext); // Inside condition
  }
}

4Convert class components to function components if needed

If you are trying to use useContext in a class component, you need to convert it to a function component or use the Context.Consumer component instead.

jsx

// ✅ Using Context.Consumer in a class component
class MyClassComponent extends React.Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {theme => <div style={{ color: theme.color }}>Hello</div>}
      </ThemeContext.Consumer>
    );
  }
}

// ✅ Convert to function component
function MyFunctionComponent() {
  const theme = useContext(ThemeContext);
  return <div style={{ color: theme.color }}>Hello</div>;
}

5Verify you are not calling useContext in event handlers or callbacks

Hooks cannot be called inside event handlers, promises, or regular JavaScript functions. Extract the context value at the top level and use it inside handlers.

jsx

// ✅ Correct
function MyComponent() {
  const theme = useContext(ThemeContext); // Top level

  const handleClick = () => {
    console.log('Current theme:', theme); // Using theme, not calling useContext
  };

  return <button onClick={handleClick}>Click</button>;
}

// ❌ Incorrect
function MyComponent() {
  const handleClick = () => {
    const theme = useContext(ThemeContext); // Inside event handler
    console.log(theme);
  };
}

Advanced notes

React's Rules of Hooks are enforced by the eslint-plugin-react-hooks plugin, which can catch these errors during development. The plugin is included by default in Create React App.

Under the hood, React associates Hook calls with a specific component instance by maintaining a "dispatcher" during rendering. When you call a Hook outside a component, there is no active dispatcher, leading to the error.

If you encounter this error in a codebase that mixes function and class components, consider creating a higher-order component (HOC) or using the Context.Consumer pattern for class components while gradually migrating to function components.

Remember that custom Hooks are the primary mechanism for reusing Hook-based logic. If you find yourself needing context in multiple places, creating a custom Hook like useTheme() or useAuth() can make your code cleaner and more maintainable.

Frequently asked questions

What does "useContext must be called inside a function component" mean?: The useContext Hook is part of React's Hooks API, which allows you to use React features like context in function components. Hooks must be called at the top level of a React function component or a custom Hook. Calling useContext outside these valid locations breaks the Rules of Hooks and causes React to throw this error.
How do I fix "useContext must be called inside a function component"?: This error occurs when you try to call the useContext Hook outside of a React function component or custom Hook. React Hooks have strict rules about where they can be called, and violating these rules leads to this runtime error.
What causes "useContext must be called inside a function component"?: Calling useContext inside a regular JavaScript function that is not a React component or custom Hook Placing useContext inside a conditional statement, loop, or nested function Using useContext in a class component (which does not support Hooks)
Is the "useContext must be called inside a function component" error serious?: It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading

📚React Official Documentation