Random "Can't perform a React state update on an unmounted component..." errors in v0.2.0.

After 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

[GimpMaster]

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.

import "./styles.css";
import { useState } from "react";

import { atom, useRecoilState, useRecoilValue } from "recoil";

const textState = atom({
  key: "textState", // unique ID (with respect to other atoms/selectors)
  default: "" // default value (aka initial value)
});

function Page1() {
  const [text, setText] = useRecoilState(textState);
  return <div onClick={() => setText("Page1")}>Page1</div>;
}

function Page2() {
  const [text, setText] = useRecoilState(textState);
  return <div onClick={() => setText("Page2")}>Page2</div>;
}

export default function App() {
  const [page, setPage] = useState(1);

  return (
    <div className="App">
      {page === 1 && <Page1 />}
      {page === 2 && <Page2 />}
      <h3
        onClick={() => {
          console.log("here");
          page === 1 ? setPage(2) : setPage(1);
        }}
      >
        Click To Change Page
      </h3>
    </div>
  );
}

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

[ianstormtaylor]

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.