React: TypeError: func.apply is not a function / Uncaught TypeError: destroy is not a function

Created on 13 Feb 2019 · 13Comments · Source: facebook/react

Do you want to request a feature or report a bug?

A bug

What is the current behavior?

Doing certain dispatches with redux or other random things cause react to crash. It's working perfectly on react 16.8.0-alpha0 but as soon as I update to alpha 1 it crashes.

console.js:59 01:27:08.503 › TypeError: func.apply is not a function
    at HTMLUnknownElement.callCallback (http://localhost:1212/dist/renderer.dev.js:250583:14)
    at Object.invokeGuardedCallbackDev (http://localhost:1212/dist/renderer.dev.js:250633:16)
    at invokeGuardedCallback (http://localhost:1212/dist/renderer.dev.js:250690:31)
    at safelyCallDestroy (http://localhost:1212/dist/renderer.dev.js:267167:5)
    at commitUnmount (http://localhost:1212/dist/renderer.dev.js:267504:17)
    at commitNestedUnmounts (http://localhost:1212/dist/renderer.dev.js:267548:5)
    at unmountHostComponents (http://localhost:1212/dist/renderer.dev.js:267809:7)
    at commitDeletion (http://localhost:1212/dist/renderer.dev.js:267861:5)
    at commitAllHostEffects (http://localhost:1212/dist/renderer.dev.js:268602:11)
    at HTMLUnknownElement.callCallback (http://localhost:1212/dist/renderer.dev.js:250583:14)
    at Object.invokeGuardedCallbackDev (http://localhost:1212/dist/renderer.dev.js:250633:16)
    at invokeGuardedCallback (http://localhost:1212/dist/renderer.dev.js:250690:31)
    at commitRoot (http://localhost:1212/dist/renderer.dev.js:268826:7)
    at completeRoot (http://localhost:1212/dist/renderer.dev.js:270318:3)
    at performWorkOnRoot (http://localhost:1212/dist/renderer.dev.js:270247:9)
    at performWork (http://localhost:1212/dist/renderer.dev.js:270155:7)
consoleLog @ console.js:59
transport @ console.js:35
log @ log.js:25
componentDidCatch @ Root.js:20
callback @ react-dom.development.js:17617
callCallback @ react-dom.development.js:15983
commitUpdateEffects @ react-dom.development.js:16022
commitUpdateQueue @ react-dom.development.js:16010
commitLifeCycles @ react-dom.development.js:16894
commitAllLifeCycles @ react-dom.development.js:18219
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18427
completeRoot @ react-dom.development.js:19884
performWorkOnRoot @ react-dom.development.js:19813
performWork @ react-dom.development.js:19721
performSyncWork @ react-dom.development.js:19695
interactiveUpdates$1 @ react-dom.development.js:19964
interactiveUpdates @ react-dom.development.js:2169
dispatchInteractiveEvent @ react-dom.development.js:4878

01:52:09.074 › TypeError: destroy is not a function
    at commitHookEffectList (http://localhost:1212/dist/renderer.dev.js:267241:11)
    at commitPassiveHookEffects (http://localhost:1212/dist/renderer.dev.js:267270:3)
    at HTMLUnknownElement.callCallback (http://localhost:1212/dist/renderer.dev.js:250583:14)
    at Object.invokeGuardedCallbackDev (http://localhost:1212/dist/renderer.dev.js:250633:16)
    at invokeGuardedCallback (http://localhost:1212/dist/renderer.dev.js:250690:31)
    at commitPassiveEffects (http://localhost:1212/dist/renderer.dev.js:268691:9)
    at wrapped (http://localhost:1212/dist/renderer.dev.js:298178:34)
    at flushFirstCallback (http://localhost:1212/dist/renderer.dev.js:298513:28)
    at flushWork (http://localhost:1212/dist/renderer.dev.js:298625:11)
    at MessagePort.module.exports../node_modules/scheduler/cjs/scheduler.development.js.channel.port1.onmessage (http://localhost:1212/dist/renderer.dev.js:298986:9)
consoleLog @ console.js:59
transport @ console.js:35
log @ log.js:25
componentDidCatch @ Root.js:20
callback @ react-dom.development.js:17617
callCallback @ react-dom.development.js:15983
commitUpdateEffects @ react-dom.development.js:16022
commitUpdateQueue @ react-dom.development.js:16010
commitLifeCycles @ react-dom.development.js:16894
commitAllLifeCycles @ react-dom.development.js:18219
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18427
completeRoot @ react-dom.development.js:19884
performWorkOnRoot @ react-dom.development.js:19813
performWork @ react-dom.development.js:19721
performSyncWork @ react-dom.development.js:19695
requestWork @ react-dom.development.js:19564
commitPassiveEffects @ react-dom.development.js:18278
wrapped @ scheduler-tracing.development.js:207
flushFirstCallback @ scheduler.development.js:107
flushWork @ scheduler.development.js:219
module.exports../node_modules/scheduler/cjs/scheduler.development.js.channel.port1.onmessage @ scheduler.development.js:580

The problem looks like is caused here (?):

      function callCallback() {
        // We immediately remove the callback from event listeners so that
        // nested `invokeGuardedCallback` calls do not clash. Otherwise, a
        // nested call would trigger the fake event handlers of any call higher
        // in the stack.
        fakeNode.removeEventListener(evtType, callCallback, false);

        // We check for window.hasOwnProperty('event') to prevent the
        // window.event assignment in both IE <= 10 as they throw an error
        // "Member not found" in strict mode, and in Firefox which does not
        // support window.event.
        if (typeof window.event !== 'undefined' && window.hasOwnProperty('event')) {
          window.event = windowEvent;
        }

        func.apply(context, funcArgs); <---------------------
        didError = false;
      }
...

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

Well, I don't really know how to reproduce but you can find my app code here, here are the important files:
configureStore.dev.js -> Has all configs of redux
this and this are just random places where it happens.
Here are some more logs that might be useful:

Uncaught TypeError: func.apply is not a function
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at safelyCallDestroy (react-dom.development.js:16733)
    at commitUnmount (react-dom.development.js:17070)
    at unmountHostComponents (react-dom.development.js:17396)
    at commitDeletion (react-dom.development.js:17427)
    at commitAllHostEffects (react-dom.development.js:18168)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at commitRoot (react-dom.development.js:18392)
    at completeRoot (react-dom.development.js:19884)
    at performWorkOnRoot (react-dom.development.js:19813)
    at performWork (react-dom.development.js:19721)
    at performSyncWork (react-dom.development.js:19695)
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
safelyCallDestroy @ react-dom.development.js:16733
commitUnmount @ react-dom.development.js:17070
unmountHostComponents @ react-dom.development.js:17396
commitDeletion @ react-dom.development.js:17427
commitAllHostEffects @ react-dom.development.js:18168
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18392
completeRoot @ react-dom.development.js:19884
performWorkOnRoot @ react-dom.development.js:19813
performWork @ react-dom.development.js:19721
performSyncWork @ react-dom.development.js:19695
requestWork @ react-dom.development.js:19564
scheduleWork @ react-dom.development.js:19373
enqueueSetState @ react-dom.development.js:11051
module.exports../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:335
(anonymous) @ Provider.js:53
dispatch @ redux.js:214
e @ VM115:1
(anonymous) @ middleware.js:22
(anonymous) @ redux-logger.js:1
(anonymous) @ index.js:11
dispatch @ VM115:1
onLocationChanged @ ConnectedRouter.js:139
handleLocationChange @ ConnectedRouter.js:84
listener @ createTransitionManager.js:46
(anonymous) @ createTransitionManager.js:65
notifyListeners @ createTransitionManager.js:64
setState @ createHashHistory.js:86
(anonymous) @ createHashHistory.js:122
confirmTransitionTo @ createTransitionManager.js:36
handlePop @ createHashHistory.js:120
handleHashChange @ createHashHistory.js:109
react-dom.development.js:149 Uncaught TypeError: func.apply is not a function
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at safelyCallDestroy (react-dom.development.js:16733)
    at commitUnmount (react-dom.development.js:17070)
    at commitNestedUnmounts (react-dom.development.js:17114)
    at unmountHostComponents (react-dom.development.js:17375)
    at commitDeletion (react-dom.development.js:17427)
    at commitAllHostEffects (react-dom.development.js:18168)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at commitRoot (react-dom.development.js:18392)
    at completeRoot (react-dom.development.js:19884)
    at performWorkOnRoot (react-dom.development.js:19813)
    at performWork (react-dom.development.js:19721)
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
safelyCallDestroy @ react-dom.development.js:16733
commitUnmount @ react-dom.development.js:17070
commitNestedUnmounts @ react-dom.development.js:17114
unmountHostComponents @ react-dom.development.js:17375
commitDeletion @ react-dom.development.js:17427
commitAllHostEffects @ react-dom.development.js:18168
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18392
completeRoot @ react-dom.development.js:19884
performWorkOnRoot @ react-dom.development.js:19813
performWork @ react-dom.development.js:19721
performSyncWork @ react-dom.development.js:19695
requestWork @ react-dom.development.js:19564
scheduleWork @ react-dom.development.js:19373
enqueueSetState @ react-dom.development.js:11051
module.exports../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:335
(anonymous) @ Provider.js:53
dispatch @ redux.js:214
e @ VM115:1
(anonymous) @ middleware.js:22
(anonymous) @ redux-logger.js:1
(anonymous) @ index.js:11
dispatch @ VM115:1
onLocationChanged @ ConnectedRouter.js:139
handleLocationChange @ ConnectedRouter.js:84
listener @ createTransitionManager.js:46
(anonymous) @ createTransitionManager.js:65
notifyListeners @ createTransitionManager.js:64
setState @ createHashHistory.js:86
(anonymous) @ createHashHistory.js:122
confirmTransitionTo @ createTransitionManager.js:36
handlePop @ createHashHistory.js:120
handleHashChange @ createHashHistory.js:109
react-dom.development.js:16647 The above error occurred in one of your React components:
    in Unknown
    in Suspense
    in Unknown (created by Route)
    in Route (created by RouteDef)
    in StrictMode (created by App)
    in App (created by RouteDef)
    in RouteDef (created by Context.Consumer)
    in Connect(RouteDef) (created by Root)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by Context.Consumer)
    in Connect(ConnectedRouterWithContext) (created by Root)
    in div (created by Root)
    in Provider (created by Root)
    in Root
    in AppContainer

React will try to recreate this component tree from scratch using the error boundary you provided, Root.
logCapturedError @ react-dom.development.js:16647
logError @ react-dom.development.js:16683
callback @ react-dom.development.js:17616
callCallback @ react-dom.development.js:15983
commitUpdateEffects @ react-dom.development.js:16022
commitUpdateQueue @ react-dom.development.js:16010
commitLifeCycles @ react-dom.development.js:16894
commitAllLifeCycles @ react-dom.development.js:18219
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18427
completeRoot @ react-dom.development.js:19884
performWorkOnRoot @ react-dom.development.js:19813
performWork @ react-dom.development.js:19721
performSyncWork @ react-dom.development.js:19695
requestWork @ react-dom.development.js:19564
scheduleWork @ react-dom.development.js:19373
enqueueSetState @ react-dom.development.js:11051
module.exports../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:335
(anonymous) @ Provider.js:53
dispatch @ redux.js:214
e @ VM115:1
(anonymous) @ middleware.js:22
(anonymous) @ redux-logger.js:1
(anonymous) @ index.js:11
dispatch @ VM115:1
onLocationChanged @ ConnectedRouter.js:139
handleLocationChange @ ConnectedRouter.js:84
listener @ createTransitionManager.js:46
(anonymous) @ createTransitionManager.js:65
notifyListeners @ createTransitionManager.js:64
setState @ createHashHistory.js:86
(anonymous) @ createHashHistory.js:122
confirmTransitionTo @ createTransitionManager.js:36
handlePop @ createHashHistory.js:120
handleHashChange @ createHashHistory.js:109
console.js:59 01:56:16.048 › TypeError: func.apply is not a function
    at HTMLUnknownElement.callCallback (http://localhost:1212/dist/renderer.dev.js:250583:14)
    at Object.invokeGuardedCallbackDev (http://localhost:1212/dist/renderer.dev.js:250633:16)
    at invokeGuardedCallback (http://localhost:1212/dist/renderer.dev.js:250690:31)
    at safelyCallDestroy (http://localhost:1212/dist/renderer.dev.js:267167:5)
    at commitUnmount (http://localhost:1212/dist/renderer.dev.js:267504:17)
    at unmountHostComponents (http://localhost:1212/dist/renderer.dev.js:267830:7)
    at commitDeletion (http://localhost:1212/dist/renderer.dev.js:267861:5)
    at commitAllHostEffects (http://localhost:1212/dist/renderer.dev.js:268602:11)
    at HTMLUnknownElement.callCallback (http://localhost:1212/dist/renderer.dev.js:250583:14)
    at Object.invokeGuardedCallbackDev (http://localhost:1212/dist/renderer.dev.js:250633:16)
    at invokeGuardedCallback (http://localhost:1212/dist/renderer.dev.js:250690:31)
    at commitRoot (http://localhost:1212/dist/renderer.dev.js:268826:7)
    at completeRoot (http://localhost:1212/dist/renderer.dev.js:270318:3)
    at performWorkOnRoot (http://localhost:1212/dist/renderer.dev.js:270247:9)
    at performWork (http://localhost:1212/dist/renderer.dev.js:270155:7)
    at performSyncWork (http://localhost:1212/dist/renderer.dev.js:270129:3)
consoleLog @ console.js:59
transport @ console.js:35
log @ log.js:25
componentDidCatch @ Root.js:20
callback @ react-dom.development.js:17617
callCallback @ react-dom.development.js:15983
commitUpdateEffects @ react-dom.development.js:16022
commitUpdateQueue @ react-dom.development.js:16010
commitLifeCycles @ react-dom.development.js:16894
commitAllLifeCycles @ react-dom.development.js:18219
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18427
completeRoot @ react-dom.development.js:19884
performWorkOnRoot @ react-dom.development.js:19813
performWork @ react-dom.development.js:19721
performSyncWork @ react-dom.development.js:19695
requestWork @ react-dom.development.js:19564
scheduleWork @ react-dom.development.js:19373
enqueueSetState @ react-dom.development.js:11051
module.exports../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:335
(anonymous) @ Provider.js:53
dispatch @ redux.js:214
e @ VM115:1
(anonymous) @ middleware.js:22
(anonymous) @ redux-logger.js:1
(anonymous) @ index.js:11
dispatch @ VM115:1
onLocationChanged @ ConnectedRouter.js:139
handleLocationChange @ ConnectedRouter.js:84
listener @ createTransitionManager.js:46
(anonymous) @ createTransitionManager.js:65
notifyListeners @ createTransitionManager.js:64
setState @ createHashHistory.js:86
(anonymous) @ createHashHistory.js:122
confirmTransitionTo @ createTransitionManager.js:36
handlePop @ createHashHistory.js:120
handleHashChange @ createHashHistory.js:109
react-dom.development.js:16647 The above error occurred in the <SideBar> component:
    in SideBar (created by Context.Consumer)
    in Connect(SideBar) (created by RouteDef)
    in div (created by RouteDef)
    in div (created by RouteDef)
    in StrictMode (created by App)
    in App (created by RouteDef)
    in RouteDef (created by Context.Consumer)
    in Connect(RouteDef) (created by Root)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by Context.Consumer)
    in Connect(ConnectedRouterWithContext) (created by Root)
    in div (created by Root)
    in Provider (created by Root)
    in Root
    in AppContainer

React will try to recreate this component tree from scratch using the error boundary you provided, Root.
logCapturedError @ react-dom.development.js:16647
logError @ react-dom.development.js:16683
callback @ react-dom.development.js:17616
callCallback @ react-dom.development.js:15983
commitUpdateEffects @ react-dom.development.js:16022
commitUpdateQueue @ react-dom.development.js:16010
commitLifeCycles @ react-dom.development.js:16894
commitAllLifeCycles @ react-dom.development.js:18219
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18427
completeRoot @ react-dom.development.js:19884
performWorkOnRoot @ react-dom.development.js:19813
performWork @ react-dom.development.js:19721
performSyncWork @ react-dom.development.js:19695
requestWork @ react-dom.development.js:19564
scheduleWork @ react-dom.development.js:19373
enqueueSetState @ react-dom.development.js:11051
module.exports../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:335
(anonymous) @ Provider.js:53
dispatch @ redux.js:214
e @ VM115:1
(anonymous) @ middleware.js:22
(anonymous) @ redux-logger.js:1
(anonymous) @ index.js:11
dispatch @ VM115:1
onLocationChanged @ ConnectedRouter.js:139
handleLocationChange @ ConnectedRouter.js:84
listener @ createTransitionManager.js:46
(anonymous) @ createTransitionManager.js:65
notifyListeners @ createTransitionManager.js:64
setState @ createHashHistory.js:86
(anonymous) @ createHashHistory.js:122
confirmTransitionTo @ createTransitionManager.js:36
handlePop @ createHashHistory.js:120
handleHashChange @ createHashHistory.js:109
console.js:59 01:56:16.056 › TypeError: func.apply is not a function
    at HTMLUnknownElement.callCallback (http://localhost:1212/dist/renderer.dev.js:250583:14)
    at Object.invokeGuardedCallbackDev (http://localhost:1212/dist/renderer.dev.js:250633:16)
    at invokeGuardedCallback (http://localhost:1212/dist/renderer.dev.js:250690:31)
    at safelyCallDestroy (http://localhost:1212/dist/renderer.dev.js:267167:5)
    at commitUnmount (http://localhost:1212/dist/renderer.dev.js:267504:17)
    at commitNestedUnmounts (http://localhost:1212/dist/renderer.dev.js:267548:5)
    at unmountHostComponents (http://localhost:1212/dist/renderer.dev.js:267809:7)
    at commitDeletion (http://localhost:1212/dist/renderer.dev.js:267861:5)
    at commitAllHostEffects (http://localhost:1212/dist/renderer.dev.js:268602:11)
    at HTMLUnknownElement.callCallback (http://localhost:1212/dist/renderer.dev.js:250583:14)
    at Object.invokeGuardedCallbackDev (http://localhost:1212/dist/renderer.dev.js:250633:16)
    at invokeGuardedCallback (http://localhost:1212/dist/renderer.dev.js:250690:31)
    at commitRoot (http://localhost:1212/dist/renderer.dev.js:268826:7)
    at completeRoot (http://localhost:1212/dist/renderer.dev.js:270318:3)
    at performWorkOnRoot (http://localhost:1212/dist/renderer.dev.js:270247:9)
    at performWork (http://localhost:1212/dist/renderer.dev.js:270155:7)
consoleLog @ console.js:59
transport @ console.js:35
log @ log.js:25
componentDidCatch @ Root.js:20
callback @ react-dom.development.js:17617
callCallback @ react-dom.development.js:15983
commitUpdateEffects @ react-dom.development.js:16022
commitUpdateQueue @ react-dom.development.js:16010
commitLifeCycles @ react-dom.development.js:16894
commitAllLifeCycles @ react-dom.development.js:18219
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18427
completeRoot @ react-dom.development.js:19884
performWorkOnRoot @ react-dom.development.js:19813
performWork @ react-dom.development.js:19721
performSyncWork @ react-dom.development.js:19695
requestWork @ react-dom.development.js:19564
scheduleWork @ react-dom.development.js:19373
enqueueSetState @ react-dom.development.js:11051
module.exports../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:335
(anonymous) @ Provider.js:53
dispatch @ redux.js:214
e @ VM115:1
(anonymous) @ middleware.js:22
(anonymous) @ redux-logger.js:1
(anonymous) @ index.js:11
dispatch @ VM115:1
onLocationChanged @ ConnectedRouter.js:139
handleLocationChange @ ConnectedRouter.js:84
listener @ createTransitionManager.js:46
(anonymous) @ createTransitionManager.js:65
notifyListeners @ createTransitionManager.js:64
setState @ createHashHistory.js:86
(anonymous) @ createHashHistory.js:122
confirmTransitionTo @ createTransitionManager.js:36
handlePop @ createHashHistory.js:120
handleHashChange @ createHashHistory.js:109

I tried giving you every piece of information I could, if you need any more info I'll be more than happy to help

What is the expected behavior?

Well, it shouldn't crash I guess

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

It's working perfectly on react 16.8.0-alpha 0 but as soon as I update to alpha 1 or later it crashes.

Source

killpowa

👍8 ❤4 👎1

Most helpful comment

TypeError: destroy is not a function

This is the real error, and indicates that you're returning a value from useEffect that isn't a function.

Warning: An Effect function must not return anything besides a function, which is used for clean-up.

@gorilla-devs can you confirm that you received that warning?

Looking at the code that you shared you're using async functions with useEffect a lot, which isn't supported and will trigger this error. You should do what the warning recommends:

It looks like you wrote useEffect(async () => ...) or returned a Promise. Instead, you may write an async function separately and then call it from inside the effect:

async function fetchComment(commentId) {
  // You can await here
}

useEffect(() => {
  fetchComment(commentId);
}, [commentId]);

aweary on 13 Feb 2019

👍133 ❤53 🎉37 🚀33 😄13 👀7

All 13 comments

TypeError: destroy is not a function

This is the real error, and indicates that you're returning a value from useEffect that isn't a function.

Warning: An Effect function must not return anything besides a function, which is used for clean-up.

@gorilla-devs can you confirm that you received that warning?

Looking at the code that you shared you're using async functions with useEffect a lot, which isn't supported and will trigger this error. You should do what the warning recommends:

It looks like you wrote useEffect(async () => ...) or returned a Promise. Instead, you may write an async function separately and then call it from inside the effect:

async function fetchComment(commentId) {
  // You can await here
}

useEffect(() => {
  fetchComment(commentId);
}, [commentId]);

aweary on 13 Feb 2019

👍133 ❤53 🎉37 🚀33 😄13 👀7

How can I do something like this though?

  useEffect(async () => {
    setNativeLauncherProfiles(await OfficialLancherProfilesExists());
  }, []);

killpowa on 13 Feb 2019

👀7

see the answer from @aweary:

async function myAsyncEffect() {
  const hasOfficialLancherProfiles = await OfficialLancherProfilesExists(); 
  setNativeLauncherProfiles(hasOfficialLancherProfiles);
}

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

Or you could wrap it in an IIFE or ... some solutions at stackoverflow

ioss on 13 Feb 2019

❤6 🎉6 👍6 🚀3 👀1

How can I do something like this though?

If you try to do this you’ll see a warning in the console that tells you exactly how to do that correctly — including a code example. Have you read it?

gaearon on 13 Feb 2019

🎉9 👍9

The warnings are super nice! Love it! @gaearon

Rolandisimo on 15 Mar 2019

I had a similar problem that this thread helped me resolve:
React.useEffect(() => !property && fetchProperty(setProperty));
(which returns the boolean value false when property truthy , which is not a function)

Which I had to replace for
React.useEffect(() => { if (!property) fetchProperty(setProperty); });

Gsiete on 12 Jun 2019

👍4

Thanx! I will never more use useEffect with async =)

sirmong on 6 Aug 2019

👍7

We had a the error exactly like @Gsiete did, thanks for the comment.

Jeevan-Kishore on 30 Sep 2019

I've fixed this issue by moving code inside a function and calling it inside useEffect() hook.

const [versionName, setVersionName] = useState(`${version.name} copy`)
const [validationsErrors, setValidationsErrors] = useState('')

  useEffect(() => {
    const runValidation = () => {
      const errors = validation({ versionName })
      if (size(errors) > 0) {
        setValidationsErrors(errors)
        return null
      } else {
        setValidationsErrors(null)
      }
    }
    runValidation()
  }, [versionName])

sagar-gavhane on 6 Mar 2020

its happened with my

  useEffect(() => {
    const unsubscribe = navigation.addListener('willBlur', () => {
      setPaused(true);
    });
    return unsubscribe;
  }, [navigation]);

  useEffect(() => {
    navigation.addListener('willBlur', () => {
      setPaused(true);
    });
  }, [navigation]);

MoeMamdouh on 15 Mar 2020

👍5 🎉1

its happened with my

  useEffect(() => {
    const unsubscribe = navigation.addListener('willBlur', () => {
      setPaused(true);
    });
    return unsubscribe;
  }, [navigation]);

  useEffect(() => {
    navigation.addListener('willBlur', () => {
      setPaused(true);
    });
  }, [navigation]);

@MoeMamdouh Thanks!

piyush97 on 26 Apr 2020

for calling async inside useEffect you can use IEFE function

useEffect(() => {
    (async () => {
         await asyncCall() 
    })()
}, [])

useEffect return type must be a function or nothing "undefined". putting async on useEffect make it to return a Promise which is not a function

EhsanSarshar on 24 Jun 2020

🎉7 👍5 ❤4 🚀3 👀1 😄1

I got both cus I forgot wrapper an async function with {} in useEffect:

//TypeError: destroy is not a function
useEffect(()=>req()
))
//Uncaught TypeError: func.apply is not a function
useEffect(()=>req(),[])

fix:

useEffect(()=>{
req()
})

yeecai on 2 Jul 2020

Was this page helpful?

0 / 5 - 0 ratings

Related issues

Variable refers to new Date() can not be a child element.

krave1986 · 3Comments

Using React.addons.CSSTransitionGroup adds an extra <span>?

framerate · 3Comments

[Docs] [Question] Refs - Callback vs String

hnordt · 3Comments

Input onChange not triggered every time in IE11 if e.preventDefault() used

jmullo · 3Comments

Re-render element in componentDidMount at once Error:Cannot read property 'rootID' of null.

h1orz · 3Comments