Random "Can't perform a React state update on an unmounted component..." errors in v0.2.0.
See original GitHub issueAfter upgrading to version v0.2.0 I’m getting errors like this at random components and can’t figure out why it happens. All components works fine with v0.1.2. All my atoms just simple atoms without async selectors and other complicated stuff.
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
at node_modules\react-native\Libraries\LogBox\LogBox.js:173:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:106:4 in printWarning
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:75:16 in error
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19152:9 in warnAboutUpdateOnUnmountedFiberInDEV
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17093:40 in scheduleUpdateOnFiber
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:11003:16 in dispatchAction
at [native code]:null in dispatchAction
at node_modules\recoil\native\recoil.js:4309:24 in subscribeToRecoilValue$1$argument_2
at node_modules\recoil\native\recoil.js:3321:41 in sendEndOfBatchNotifications
at node_modules\recoil\native\recoil.js:3374:6 in Recoil_Queue.enqueueExecution$argument_1
at node_modules\recoil\native\recoil.js:1041:0 in enqueueExecution
at node_modules\recoil\native\recoil.js:3355:18 in useEffect$argument_0
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15561:31 in commitHookEffectListMount
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15618:35 in commitPassiveHookEffects
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:265:4 in invokeGuardedCallbackImpl
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:476:2 in invokeGuardedCallback
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18795:29 in flushPassiveEffectsImpl
at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17650:21 in performSyncWorkOnRoot
at [native code]:null in performSyncWorkOnRoot
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1
at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17125:30 in scheduleUpdateOnFiber
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:11003:16 in dispatchAction
at [native code]:null in dispatchAction
at node_modules\recoil\native\recoil.js:3354:2 in Batcher
at node_modules\recoil\native\recoil.js:3556:4 in replaceState
at node_modules\recoil\native\recoil.js:775:9 in applyActionsToStore
at node_modules\recoil\native\recoil.js:798:9 in queueOrPerformStateUpdate
at node_modules\recoil\native\recoil.js:841:24 in setRecoilValue
at node_modules\recoil\native\recoil.js:4416:9 in useSetRecoilState
at node_modules\expo-image-manipulator\build\ImageManipulator.js:4:7 in manipulateAsync
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:293:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:154:27 in invoke
at node_modules\regenerator-runtime\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue
Environment
software | version |
---|---|
expo | 40.0.1 |
react | 17.0.2 |
react-native | 0.63.4 |
recoil | 0.2.0 |
Issue Analytics
- State:
- Created 2 years ago
- Reactions:15
- Comments:49 (5 by maintainers)
Top Results From Across the Web
Can't perform a React state update on an unmounted ...
This warning is due to when we do some fetch request while that request is in the background (because some requests take some...
Read more >React: Prevent state updates on unmounted components
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your...
Read more >Warning: Can't perform a React state update on an ...
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your...
Read more >How to work with React the right way to avoid some common ...
Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application....
Read more >Change log for 4.8.35
Bug 2051576: Requeue create on invalid credentials errors #253 ... Bug 1954566: Cannot update a component ( UtilizationCard ) error #8833 ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Ok, I wrote a real quick Code Sandbox that illustrates the problem.
Here is the link to the Code Sandbox
https://codesandbox.io/s/recoil-breaking-hxmnj?file=/src/App.js
Just incase the link doesn’t work here is the main App.js with the problem.
To get the issue to appear. Click on “Click To Change Page”. Then click on the “Page 2” div. Since the recoil State was already on Page 1, but now it unmounted it will still fire and cause the issue.
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
Also I only see this if react is 16.X
Was having this and couldn’t figure out why. Finally tracked it down to a component that needed to be wrapped in
<Suspense>
(because of a nested async atom) but was not. I don’t know if there’s a way to improve the error message when that happens on the Recoil/React end, but if so it would be greatly appreciated because it was a huge pain to debug.