"Uncaught TypeError: Illegal invocation" when using useAsync

[tomshane]

When I'm using useAsync hook instead of the <Async> component, when the parent component (page) gets unmounted, it throws this error:

Uncaught TypeError: Illegal invocation
    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)
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
interactiveUpdates$1 @ react-dom.development.js:19964
interactiveUpdates @ react-dom.development.js:2169
dispatchInteractiveEvent @ react-dom.development.js:4878

I'm using React 16.8.0 with official hooks API, however this was the case even with the previous alpha.

[ghengeveld]

Thanks for reporting! Do you have a small example how to reproduce this?

[KaRkY]

Just encountered the same problem.

bug lies in this line. AbortControllers abort method gets called with null context.

If you change this line to this useEffect(() => () => abortController.current.abort(), []) it should work OK.

[ghengeveld]

Thanks! I'll push a fix soon. There's also a major update (v4) coming up, but I'll patch this bug separately.

[ghengeveld]

Published in v3.13.3.