react runtime_error ai_generated true

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

ID: react/useEffect-return-not-function

Also available as: JSON · Markdown · 中文
92%Fix Rate
90%Confidence
1Evidence
2023-08-20First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
React 16.8+ active — — —
React 17.x active — — —
React 18.x active — — —

Root Cause

The useEffect callback returns a value that is not a function or undefined, violating React's contract for effect cleanup.

generic

中文

useEffect 回调返回了一个不是函数或 undefined 的值，违反了 React 对 effect 清理的约定。

Official Documentation

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

Workarounds

  1. 95% success Ensure useEffect callback returns either nothing (undefined) or a cleanup function. Example: useEffect(() => { const timer = setInterval(...); return () => clearInterval(timer); }, []); 
    Ensure useEffect callback returns either nothing (undefined) or a cleanup function. Example: useEffect(() => { const timer = setInterval(...); return () => clearInterval(timer); }, []);
  2. 90% success If you need async logic, define the async function inside the effect and call it, but do not return the promise. Example: useEffect(() => { const fetchData = async () => { ... }; fetchData(); }, []); 
    If you need async logic, define the async function inside the effect and call it, but do not return the promise. Example: useEffect(() => { const fetchData = async () => { ... }; fetchData(); }, []);

中文步骤

  1. 确保 useEffect 回调不返回任何内容（undefined）或返回一个清理函数。示例：useEffect(() => { const timer = setInterval(...); return () => clearInterval(timer); }, []);
  2. 如果需要异步逻辑，在 effect 内部定义异步函数并调用它，但不要返回 promise。示例：useEffect(() => { const fetchData = async () => { ... }; fetchData(); }, []);

Dead Ends

Common approaches that don't work:

  1. Returning null or false from useEffect to suppress the warning. 90% fail

    React expects either undefined (no cleanup) or a function; returning null/false triggers the same error because they are not functions.

  2. Removing the return statement entirely even when cleanup is needed. 70% fail

    Without a cleanup function, subscriptions, timers, or event listeners may persist, causing memory leaks or duplicate effects.

  3. Wrapping the return value in an async function (e.g., useEffect(async () => { ... return someValue; })). 95% fail

    Async functions always return a Promise, which is not a function for cleanup; React will throw the same error.