Почему не отрабатывает clearInterval?

Question

[Виктор]

const [timer, setTimer] = useState(0);
    const [clearInt, setClearInt] = useState(null);

    const startTime = () => {
        setTimer(7);
        let clearTimer = setInterval(() => {
            setTimer(currentTimer => currentTimer - 1);
        }, 1000);
        setClearInt(clearTimer);
    };

    useEffect(() => {

        return () => {
             console.log(timer);
            clearInterval(clearInt);
        }
    },[]);

    useEffect(()=> {
        console.log(clearInt)
        if(timer === 0) {
            clearInterval(clearInt);
        }
    }, [timer]);

Почему при размонтировании компонента в clearInterval не попадает clearTimer и происходит утечка памяти

Answer 1

[Александр Черемхин]

Делаете все в одном useEffect. Общий подход ниже

useEffect(() => {
        const key = setInterval(()=>{
            // какая-то логика 
        });
        return () =>   clearInterval(key);  // вызовется при unmoant    
    },[]);