Clear timers when unmounting CorruptableText

The interval was cleared, but not the setTimeout to replace the character
This commit is contained in:
Martin Fournier 2022-01-13 09:23:52 -05:00
parent d274e21a10
commit 6633c00f5d

@ -25,20 +25,22 @@ export function CorruptableText(props: IProps): JSX.Element {
useEffect(() => {
let counter = 5;
const id = setInterval(() => {
const timers: number[] = [];
const intervalId = setInterval(() => {
counter--;
if (counter > 0) return;
counter = Math.random() * 5;
const index = Math.random() * content.length;
const letter = content.charAt(index);
setContent((content) => replace(content, index, randomize(letter)));
setTimeout(() => {
timers.push(window.setTimeout(() => {
setContent((content) => replace(content, index, letter));
}, 500);
}, 500));
}, 20);
return () => {
clearInterval(id);
clearInterval(intervalId);
timers.forEach((timerId) => clearTimeout(timerId));
};
}, []);