Отреагируйте, почему "clearTimeout" не работает при обратном вызове useeffect

#reactjs #react-hooks #use-effect #react-functional-component #cleartimeout

Вопрос:

У меня есть вопрос об использовании setTimeout, clearTimeout на крючке React useEffect.

     useEffect(() => {
        let timer = setTimeout(() => {
            setRemainingSecond(remainingSecond - 1);
        }, 1000);
        return (() => {
            clearTimeout(timer);
        });
    }, [remainingSecond]);

Это мой код реакции с компонентом обратного отсчета.
Я понимаю, почему я должен очищать идентификатор времени каждый раз, когда компонент отключается из-за утечки памяти и других проблем с синхронизацией.
Но clearTimeout предназначен ли он для отмены setTimeout функции обратного вызова, верно?
и поскольку useEffect функция обратного вызова будет вызвана до монтирования компонента, не должна ли функция обратного вызова по таймауту быть отменена, и ничего не произойдет?

1. and since useeffect return callback function will be called before component mounts откуда это взялось?

2. разве функция обратного вызова таймаута не должна быть отменена, и ничего не произойдет? Я не понял этой части

3. Если компонент повторно отрисовывает/размонтирует до истечения срока действия таймера, не очистка установленного таймера приведет к выполнению функции обратного вызова предыдущего таймера, что вам не нужно.

Ответ №1:

useEffect обратный вызов будет выполняться каждый раз при изменении массива зависимостей ИЛИ перед компонентом unmounts (НЕТ mounts ).

В этом случае ваш таймер будет продолжать уменьшаться на 1 секунду каждую секунду, но если ваш компонент по какой-либо причине отключен, он не будет пытаться вызвать setRemainingSecond , как только 1000 ms закончится, предотвращая печально известную ошибку:

Можно обновить только установленный или монтируемый компонент. Обычно это означает, что вы вызвали setState() для размонтированного компонента. Это не операция. Пожалуйста, проверьте код на наличие неопределенного компонента.