Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
blarfoon opened this issue Feb 13, 2019 · 14 comments

Comments

@blarfoon
Copy link

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.

@aweary
Copy link
Contributor

aweary commented Feb 13, 2019

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 aweary closed this as completed Feb 13, 2019
@blarfoon
Copy link
Author

How can I do something like this though?

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

@ioss
Copy link
Contributor

ioss commented Feb 13, 2019

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

@gaearon
Copy link
Collaborator

gaearon commented Feb 13, 2019

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?

@Rolandisimo
Copy link

The warnings are super nice! Love it! @gaearon

@Gsiete
Copy link

Gsiete commented Jun 12, 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); });

@sirmong
Copy link

sirmong commented Aug 6, 2019

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

@Jeevan-Kishore
Copy link

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

@sagar-gavhane
Copy link

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])

@MoeMamdouh
Copy link

its happened with my

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

to

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

@piyush97
Copy link

piyush97 commented Apr 26, 2020

its happened with my

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

to

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

@MoeMamdouh Thanks!

@ehxxn
Copy link

ehxxn commented Jun 24, 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

@yeecai
Copy link

yeecai commented Jul 2, 2020

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()
})

@RSRajendra
Copy link

Its very silly bug
never write return keyword inside useEffect in anywhere in code in react version more than or equal 16.13.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests