Can't perform a React state update on an unmounted component in react

Question

I am having an issue when I try to get data api from my mongoose

Here is my code:

  const [products, setProducts] = useState([]);
  const getProductsAPI = () => {
    axios
      .get("http://localhost:8000/api/products")
      .then((res) => {
        setProducts(res.data);
        getProductsAPI();
      })
      .catch((err) => {
        console.log(err);
      });
  };

  useEffect(() => {
    getProductsAPI();
  }, [props]);

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.

have you tried using a `setTimeout` within your promise handler? — Jason, Jul 27 '20 at 20:46
Can you explain why are you invoking `getProductsAPI()` right after setting the product state? — Juan Marco, Jul 27 '20 at 20:51
After reading the post from Danilo below, I would go with that answer. — Jason, Jul 27 '20 at 21:04

score 3 · Accepted Answer · answered Jul 27 '20 at 20:48

3

The problem is the network request is resolved after the component unmounts. You can probably try some solution from this thread.

answered Jul 27 '20 at 20:48

Danilo Gacevic

474
3
13

Can't perform a React state update on an unmounted component in react

1 Answers1