My application was working fine, then I updated it to react 18, now it is throwing "destroy is not a function" when I navigate from one route to another if the current route is using useEffect to call some APIs on load. I searched the internet in this regard but every question is not regarding this issue. maybe react 18 is new thats why i cant find a solution.. Though when i reload that same page it loads perfectly. its just when i navigate the application crashes. And if i comment useEffect everything works fine

here is my useEffect Code

//on mount useEffect
  useEffect(async () => {
    getCases()
  }, []);

  //api calls functions ====>

  //get cases function
  const getCases = async () => {
    const response = await Get(CASES.get, token);
    setLoading(false);
    if (!response.error) {
      const { data } = response;
      setCases(data);
      console.log("fetched=======>", response);
    } else {
      setError(response.error);
      console.log("error====>", response);
    }
  };

and this is the error im getting

Uncaught TypeError: destroy is not a function
    at safelyCallDestroy (react-dom.development.js:22768:1)
    at commitHookEffectListUnmount (react-dom.development.js:22932:1)
    at commitPassiveUnmountInsideDeletedTreeOnFiber (react-dom.development.js:24874:1)
    at commitPassiveUnmountEffectsInsideOfDeletedTree_begin (react-dom.development.js:24824:1)
    at commitPassiveUnmountEffects_begin (react-dom.development.js:24732:1)
    at commitPassiveUnmountEffects (react-dom.development.js:24717:1)
    at flushPassiveEffectsImpl (react-dom.development.js:26847:1)
    at flushPassiveEffects (react-dom.development.js:26801:1)
    at commitRootImpl (react-dom.development.js:26752:1)
    at commitRoot (react-dom.development.js:26517:1)
safelyCallDestroy @ react-dom.development.js:22768
commitHookEffectListUnmount @ react-dom.development.js:22932
commitPassiveUnmountInsideDeletedTreeOnFiber @ react-dom.development.js:24874
commitPassiveUnmountEffectsInsideOfDeletedTree_begin @ react-dom.development.js:24824
commitPassiveUnmountEffects_begin @ react-dom.development.js:24732
commitPassiveUnmountEffects @ react-dom.development.js:24717
flushPassiveEffectsImpl @ react-dom.development.js:26847
flushPassiveEffects @ react-dom.development.js:26801
commitRootImpl @ react-dom.development.js:26752
commitRoot @ react-dom.development.js:26517
performSyncWorkOnRoot @ react-dom.development.js:25956
flushSyncCallbacks @ react-dom.development.js:11982
(anonymous) @ react-dom.development.js:25490
react_devtools_backend.js:3973 The above error occurred in the <Cases> component:

    at Cases (http://localhost:3000/static/js/bundle.js:5474:77)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
overrideMethod @ react_devtools_backend.js:3973
logCapturedError @ react-dom.development.js:18525
update.callback @ react-dom.development.js:18558
callCallback @ react-dom.development.js:13092
commitUpdateQueue @ react-dom.development.js:13113
commitLayoutEffectOnFiber @ react-dom.development.js:23204
commitLayoutMountEffects_complete @ react-dom.development.js:24461
commitLayoutEffects_begin @ react-dom.development.js:24447
commitLayoutEffects @ react-dom.development.js:24385
commitRootImpl @ react-dom.development.js:26651
commitRoot @ react-dom.development.js:26517
performSyncWorkOnRoot @ react-dom.development.js:25956
flushSyncCallbacks @ react-dom.development.js:11982
(anonymous) @ react-dom.development.js:25490
react-dom.development.js:22768 Uncaught TypeError: destroy is not a function
    at safelyCallDestroy (react-dom.development.js:22768:1)
    at commitHookEffectListUnmount (react-dom.development.js:22932:1)
    at commitPassiveUnmountInsideDeletedTreeOnFiber (react-dom.development.js:24874:1)
    at commitPassiveUnmountEffectsInsideOfDeletedTree_begin (react-dom.development.js:24824:1)
    at commitPassiveUnmountEffects_begin (react-dom.development.js:24732:1)
    at commitPassiveUnmountEffects (react-dom.development.js:24717:1)
    at flushPassiveEffectsImpl (react-dom.development.js:26847:1)
    at flushPassiveEffects (react-dom.development.js:26801:1)
    at commitRootImpl (react-dom.development.js:26752:1)
    at commitRoot (react-dom.development.js:26517:1)

CodePudding user response：

Issue

The useEffect hook callback must be a synchronous function.

useEffect(async () => {
  getCases()
}, []);

The async function implicitly returns a Promise object which is incorrectly interpreted by the React framework to be a returned cleanup function. This causes the error when the component is unmounting due to navigation.

Solution

There's no reason for the callback to be async, it's not calling any asynchronous code that it needs to await for. Remove the async keyword.

useEffect(() => {
  getCases()
}, []);

For future reference if you need to use an async in the useEffect callback, define it locally in the callback and then invoke it.

useEffect(() => {
  const asyncFn = async () => { .... };
  asyncFn();
}, []);

Or externally like you did, keeping in mind that any linters may complain about a missing dependency.

CodePudding user response：

Fixed it. removed async from useEffect and now it works fine.

//on mount useEffect
  useEffect(() => {
    getCases()
  }, []);

  //api calls functions ====>

  //get cases function
  const getCases = async () => {
    const response = await Get(CASES.get, token);
    setLoading(false);
    if (!response.error) {
      const { data } = response;
      setCases(data);
      console.log("fetched=======>", response);
    } else {
      setError(response.error);
      console.log("error====>", response);
    }
  };