import { useState, useEffect } from 'react';

//To get perfect animation without any flickering at the end of animation.
//Try to give delay time less than the animation/transition time.
//For example if your animation takes 0.5s to finish give delay time of 450ms
function useDelayUnmount(isMounted, delayTime) {
    const [shouldRender, setShouldRender] = useState(false);
    useEffect(() => {
        let timeoutId;
        if (isMounted && !shouldRender) {
            setShouldRender(true);
        }
        else if (!isMounted && shouldRender) {
            timeoutId = window.setTimeout(() => setShouldRender(false), delayTime);
        }
        return () => clearTimeout(timeoutId);
    }, [isMounted, delayTime, shouldRender]);
    return shouldRender;
}

export { useDelayUnmount };
