"Warning: Can't perform a React state update on an unmounted component."

Question

I'm creating an application using React Native CLI and RealmDB to persist the data locally. On the product list screen the useEffect function returns the error::

 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.

Code:

  const [didMount, setDidMount] = useState(false);
  const [products, setProducts] = useState<Product[]>([]);

  useEffect(() => {
    setDidMount(true);

    async function loadProducts() {
      const realm = await getRealm();

      try {
        if (!didMount) return;
        const data: Product[] = realm
          .objects('Product')
          .sorted('id', true) as any;

        setProducts(data);
      } catch (err) {
        console.error(err);
      }
    }

    loadProducts();

    return function cleanup() {
      setDidMount(false);
    };
  }, []);

Why do you need the loadProducts function...why not just directly run the code inside the `useEffect` — MrCodingB, Sep 14 '21 at 18:40
Can you try using a variable instead of useState for the `didMount` — MrCodingB, Sep 14 '21 at 18:51
Does this answer your question? [Can't perform a React state update on an unmounted component](https://stackoverflow.com/questions/53949393/cant-perform-a-react-state-update-on-an-unmounted-component) — MrCodingB, Sep 14 '21 at 18:58

score 1 · Answer 1 · answered Sep 14 '21 at 18:58

1

From this post.

You can't set states in the cleanup functions, but instead should ensure no further state updates are caused.

const [products, setProducts] = useState<Product[]>([]);

useEffect(() => {
  let updateProducts = true;

  getRealm().then((realm) => {
    try {
      const data = realm
          .objects('Product')
          .sorted('id', true) as Product[];

      if (updateProducts) setProducts(data);
    } catch (err) {
      console.error(err);
    }
  });

  return () => {
    updateProducts = false;
  };
}, []);

answered Sep 14 '21 at 18:58

MrCodingB

2,284
1
9
22

is returning the same error – Victor Souto Soares Sep 14 '21 at 19:02
Are you using any other `useState` callbacks somewhere and are you sure the error is caused by this component? – MrCodingB Sep 14 '21 at 19:03
Or perhaps the more interesting question, are you using any `setState` callbacks in some other cleanup functions somewhere? – MrCodingB Sep 14 '21 at 19:04
only that useState – Victor Souto Soares Sep 14 '21 at 19:06
Can you include the stack trace in your post – MrCodingB Sep 14 '21 at 19:07
1

if you want to check better... https://github.com/sudo-victor/phd. – Victor Souto Soares Sep 14 '21 at 19:08
the error is in src / screens / products / ProductList – Victor Souto Soares Sep 14 '21 at 19:10

"Warning: Can't perform a React state update on an unmounted component."

1 Answers1