Обратный отсчет реагировать крюк ⇐ Javascript

[Anonymous]

Я пытаюсь создать крючок React, который выполняет простой второй отсчет.

Код: Выделить всё

const { cooldown, startCooldown } = useCooldown();

Код: Выделить всё

 0}>Resend Code {`(${cooldown ? cooldown : ''})`}
< /code>
 код крюка: < /strong> < /p>


import { useState, useRef, useEffect } from 'react';

export default function useCooldown(cooldownTime = 10) {
const [cooldown, setCooldown] = useState(0);
const intervalRef = useRef(null);

function updateTimer() {
console.log('cooldown remaining: ', cooldown);
setCooldown(cooldown - 1);
if (cooldown === 0) {
clearInterval(intervalRef.current);
intervalRef.current = null;
}
}

function startCooldown() {
console.log('starting cooldown from: ', cooldownTime);
setCooldown(cooldownTime);
intervalRef.current = setInterval(updateTimer, 1000);
}

useEffect(() => {
return () => {
clearInterval(intervalRef.current);
intervalRef.current = null;
};
}, []);

return { cooldown, startCooldown };
}< /code>
< /div>
< /div>
< /p>
Консоль браузера останавливается на < /p>
starting cooldown from:  10

Я думаю, так как COOLDOWN является государственным, родительский компонент перезагружается вместе с новым экземпляром USECOOLDOWN () . Как это можно решить?


Подробнее здесь: https://stackoverflow.com/questions/797 ... react-hook