Can't properly unmount carousel

Navigating away from the page with the carousel causes multiple errors to show in the console in development mode.

I'm using react-rounter-dom to switch between pages. When I navigate away from the carousel page, I get this error in the console:

 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 the componentWillUnmount method.

And after that periodically I will get 404 errors from an endpoint that I don't have setup:

GET http://localhost:3000/carousel.js net::ERR_ABORTED 404 (Not Found)

I am using functional components with react hooks, so the componentWillUnmount lifecycle method is not available to me. I would add a useEffect cleanup function to properly cancel the subscriptions like the error message indicates, but I don't know which subscriptions to cancel because I don't know what's happening "under the hood".

Can you provide any insight on this? Is this a bug, or am I just doing something wrong? I didn't see any kind of unmount method in the NPM docs.

I will provide a code example, as that is standard, but it's a very simple application of the carousel, so I don't know if it'll be much help:


import React from 'react'
import AliceCarousel from 'react-alice-carousel';
import 'react-alice-carousel/lib/alice-carousel.css';
import imgs from '../imgs'
import Art from './Art'

const Carousel = () => {

    return (

        <div className="carousel-container">

            <AliceCarousel 
                infinite="true"
                autoPlay="true"
                animationDuration="600"
                autoPlayInterval="7000"
                disableDotsControls="true"
                disableButtonsControls="true"
                autoPlayStrategy="none"
             >
                {imgs.map((img, i) => {
                    return (
                        <Art key={i} src={img.src} alt={img.name} id={i}/>
                    )
                })}
             </AliceCarousel>
        </div>
    )
}

export default Carousel

maxmarinich / react-alice-carousel

Can't properly unmount carousel #213