react runtime_error ai_generated true

Warning: useEffect must not return anything besides a function, which is used for clean-up. You returned: undefined

ID: react/useeffect-cleanup-return-non-function

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

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
[email protected] active
[email protected] active

Root Cause

The useEffect callback returns a non-function value (e.g., undefined from an async function, a Promise, or a number) instead of a cleanup function or nothing.

generic

中文

useEffect 回调返回了一个非函数值(例如来自异步函数的 undefined、Promise 或数字),而不是清理函数或什么都不返回。

Official Documentation

https://react.dev/reference/react/useEffect

Workarounds

  1. 95% success Define an async function inside the useEffect and call it without returning it. The useEffect callback itself should not be async.
    Define an async function inside the useEffect and call it without returning it. The useEffect callback itself should not be async.
  2. 90% success If a cleanup is needed, return a function that performs the cleanup. If not, omit the return statement entirely.
    If a cleanup is needed, return a function that performs the cleanup. If not, omit the return statement entirely.

中文步骤

  1. Define an async function inside the useEffect and call it without returning it. The useEffect callback itself should not be async.
  2. If a cleanup is needed, return a function that performs the cleanup. If not, omit the return statement entirely.

Dead Ends

Common approaches that don't work:

  1. Making the useEffect callback async directly (async () => { ... }) 95% fail

    An async function always returns a Promise, which is not a cleanup function, triggering the warning.

  2. Adding a return statement that returns a string or boolean to suppress the warning 90% fail

    Only a function (or nothing) is allowed; any other type will still cause the warning.

  3. Wrapping the entire useEffect in a try-catch block 75% fail

    The warning is about the return type of the callback, not about errors inside it; try-catch doesn't change the return value.