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

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

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.

const stepState = atom({
  key: "step",
  default: "one",
})

function Example() {
  const step = useRecoilValue(stepState)
  return <>{step === "one" ? <One /> : step === "two" ? <Two /> : null}</>
}

function One() {
  const [step, setStep] = useRecoilState(stepState)
  // const setStep = useSetRecoilState(stepState)
  return (
    <>
      <h1>one</h1>
      <button onClick={() => setStep("two")}>next</button>
    </>
  )
}
function Two() {
  const [step, setStep] = useRecoilState(stepState)
  // const setStep = useSetRecoilState(stepState)
  return (
    <>
      <h1>two</h1>
      <button onClick={() => setStep("one")}>prev</button>
    </>
  )
}

This reproduces the warning in React, and I checked v0.1.3 doesn’t. Using useSetRecoilState instead of useRecoilState prevents the warning (obviously?).

One thing I noticed is, the first step change (one -> two) makes no warning, but the second one (two -> one) shows the warning and the third (one -> two), and no more warning after.

  const [state, setState] = useRecoilState(someAtom);
  useEffect(() => {
    setState((state) => ({
      ...state,
    }));
  }, [setState]);
  useEffect(() => {
    setState((state) => ({
      ...state,
    }));
  }, [setState]);
};

Does not seem correct.

First of all the [setState] should be [state], not setState. setState is the function which sets the state, the state itself you call ‘state’. useEffect is looking for an array of values which might change and when they change the useEffect gets called.

The setState should just be setState(obj) or whatever you are setting the state to…

It’s not redux, you don’t pass a function in…

const useSomeHook = (props) => {
  
  const [state, setState] = useRecoilState(someAtom);

  let {
     obj
  } = props;

  useEffect(() => {
    if (obj != null) {
      setState(obj);
    }
  }, [state]);

Reading the thread there seems to be two separate - but potentially related issues.

1. Atoms are not unsubscribed properly anymore since 0.2.0 and React 16 when unmounting components (e.g. screens)
2. Async selectors also show issues where a potential fix could be to wrap them correctly in Suspense.

Would be helpful if someone with more knowledge than me helped in summarize as this issue is quickly growing in size with several examples and sandboxes that show the issue in different setting.

Seems like a huge problem potentially, Hope there’s a way to fix this…

I don’t have any async atom but I still get the issue. @GimpMaster could repro the issue here without async: https://codesandbox.io/s/recoil-breaking-hxmnj?file=/src/App.js

React has removed this warning, please see this discussion about it

@Svarto React 16 DOM here

Having the same issue with the latest 0.4.0 version. 😞

Repro this in react16 + recoil@0.2.0. I traced a little and found that in my scenario its related to subscription.release not called in this path , but i dont know whether its designed this way.

@davwheat - Yeah I really think its a regression Recoil has with React 16.X

Just wanted to comment that I am seeing this issue too. I have a custom page router. I reduced my page down to just the useRecoilState with a return null.

When I switch to that page (which is now empty) and then to a different page and make a change to the same atom used on both pages I’ll get errors that were mentioned above.

I’m currently using React “16.13.1”

This just started happening after upgrading to Recoil 0.2.0

I made this demo but without errors

https://snack.expo.io/@amstko/react-native-recoil

• Go to screen B
• Set All screen titles in red
• Back to screen A
• Set all screen titles in red

In this example: no problem. In my stack with a more complexe code: “Can’t perform a React state update on an unmounted component…” He try to update value from useRecoilValue on the unmounted screen

I’ll investigate my code for see differences but I have 3 sub level of navigation with a lot of components.

Don’t hesitate to take my demo and make your one ✌️

Also I have this error in React Native console for this problem

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 [native code]:null in dispatchAction
at node_modules/recoil/native/recoil.js:4310:26 in subscribeToRecoilValue$1$argument_2
at node_modules/recoil/native/recoil.js:3322:18 in sendEndOfBatchNotifications
at node_modules/recoil/native/recoil.js:3375:33 in Recoil_Queue.enqueueExecution$argument_1
at node_modules/recoil/native/recoil.js:1042:3 in enqueueExecution
at node_modules/recoil/native/recoil.js:3359:4 in useEffect$argument_0
at [native code]:null in callFunctionReturnFlushedQueue

Hey @cyphire ! I use useSetRecoilState in a function after an onPress by the user. Not in the useEffect hook. I can live with his erros for now and I’m crossing my fingers for a resolution with react 17 that will come within 3 months in Expo

Just want to add, this is also happening to us in React (so not just react-native). Can’t provide any code as the error is too generic but it appears to be related to components unmounting.