react runtime_error ai_generated true

Error: Invalid hook call. Hooks can only be called inside the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app

ID: react/error-invalid-call-of-useeffect-in-callback

Also available as: JSON · Markdown · 中文
90%Fix Rate
88%Confidence
1Evidence
2024-02-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
React 18.2.0 active — — —
React 17.0.2 active — — —
React 16.14.0 active — — —

Root Cause

A hook (e.g., useEffect, useState) is being called inside a regular JavaScript function, callback, or class component, violating the Rules of Hooks that require hooks to be called at the top level of a React function component.

generic

中文

钩子（例如 useEffect、useState）在普通 JavaScript 函数、回调或类组件中被调用，违反了钩子规则，要求钩子必须在 React 函数组件的顶层调用。

Official Documentation

https://react.dev/warnings/invalid-hook-call-warning

Workarounds

  1. 90% success Ensure all hook calls are at the top level of a function component, never inside loops, conditions, or nested functions. Example: function MyComponent() { useEffect(() => { /* ... */ }, []); return <div />; } 
    Ensure all hook calls are at the top level of a function component, never inside loops, conditions, or nested functions. Example: function MyComponent() { useEffect(() => { /* ... */ }, []); return <div />; }
  2. 85% success Check for duplicate React instances in your bundle by running `npm ls react` and ensure only one version exists. If using webpack, add `resolve: { alias: { react: require.resolve('react') } }` to webpack config. 
    Check for duplicate React instances in your bundle by running `npm ls react` and ensure only one version exists. If using webpack, add `resolve: { alias: { react: require.resolve('react') } }` to webpack config.
  3. 95% success Convert class components to function components if you need to use hooks. Example: class MyComp extends Component { render() { return <div />; } } becomes function MyComp() { return <div />; } 
    Convert class components to function components if you need to use hooks. Example: class MyComp extends Component { render() { return <div />; } } becomes function MyComp() { return <div />; }

中文步骤

  1. Ensure all hook calls are at the top level of a function component, never inside loops, conditions, or nested functions. Example: function MyComponent() { useEffect(() => { /* ... */ }, []); return <div />; }
  2. Check for duplicate React instances in your bundle by running `npm ls react` and ensure only one version exists. If using webpack, add `resolve: { alias: { react: require.resolve('react') } }` to webpack config.
  3. Convert class components to function components if you need to use hooks. Example: class MyComp extends Component { render() { return <div />; } } becomes function MyComp() { return <div />; }

Dead Ends

Common approaches that don't work:

  1. Move the hook call to the top of a class component's render method 100% fail

    Hooks are not supported in class components; they must be used in function components.

  2. Wrap the hook call in a try-catch block 95% fail

    The error is thrown as an invariant, not a catchable exception, and try-catch doesn't prevent the violation.

  3. Use React.forwardRef to pass hooks to child components 90% fail

    forwardRef doesn't change where hooks can be called; hooks still must be in the component body.