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

ReactBEGINNERMEDIUM

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 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.

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);
  };
}

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

What this error means

Typical symptoms

Common causes

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

Advanced notes

Related errors

Official resources & further reading