Как лучше реализовать анимацию текста в React?

Question

[Pumba8897]

Нужно сделать анимацию текста, с автоматическиой печатью. Суть в том что есть часть текста статичная и вторая часть динамически меняется (поочередно печатаются и удаляются несколько вариантов). Реализовал это с помощью SetTimeout. Во время рендера в зависимости от условия меняется стейт с задержкой.
Вся проблема в том что при определенных действиях на сайте (прокрутка на моб. или открытие меню) анимация начинает дико ускоряться.
Не понимаю в чем проблема.

export default class AutoType extends React.Component {
    constructor() {
        super();
        this.state = {
            mainText: 'Учитесь онлайн',
            supplText: [
                'тому, что нужно',
                'на индивидуальных занятиях',
                'с классными преподавателями',
                'на удобной платформе',
                `через приложение в\u00A0смартфоне`
            ],
            countMain: 0,
            countSuppl: 0,
            supplNum: 0,
            isDeleting: false
        };
        this.writer = null;
    }

    componentWillUnmount() {
        clearInterval(this.writer);
    }

    render() {
        let timer = (Math.random() * 100).toFixed(0);
        let nextString = false;

        if (this.state.supplText[this.state.supplNum].length > 20) {
            nextString = true;
        } else if (this.state.supplText[this.state.supplNum].length < 20) {
            nextString = false;
        }

        if (this.state.countSuppl === this.state.supplText[this.state.supplNum].length) {
            timer = 2500;
        }
        if (this.state.isDeleting) {
            timer = 20;
        }

        this.writer = setTimeout(() => {
            if (this.state.isDeleting && this.state.countSuppl > 0) {
                this.setState({
                    countSuppl: this.state.countSuppl - 1
                });
            } else if (
                this.state.isDeleting &&
                this.state.countSuppl === 0 &&
                this.state.supplNum < this.state.supplText.length - 1
            ) {
                this.setState({
                    supplNum: this.state.supplNum + 1,
                    isDeleting: false
                });
            } else if (this.state.countSuppl < this.state.supplText[this.state.supplNum].length && !this.state.isDeleting) {
                this.setState({
                    countSuppl: this.state.countSuppl + 1
                });
            } else if (this.state.countSuppl >= this.state.supplText[this.state.supplNum].length) {
                this.setState({
                    isDeleting: true
                });
            } else if (this.state.supplNum === this.state.supplText.length - 1 && this.state.countSuppl === 0) {
                this.setState({
                    countMain: 0,
                    supplNum: 0,
                    isDeleting: false
                });
            }
        }, timer);

        return (
            <ResultString
                nextString={nextString}
                mainText={this.state.mainText}
                secondText={this.state.supplText[this.state.supplNum].substr(0, this.state.countSuppl)}
            />
        );
    }
}

Answer 1

[hzzzzl]

componentWillUnmount() {
        clearInterval(this.writer);
    }

может потому что тут имелся в виду clearTimeout, а иначе таймаут не очищается и их накапливается несколько?

Comments

[Pumba8897]

Нет. Я пробовал уже. Дело скорее всего действительно в том что счетчики задваиваются но не понятно по какой причине. При простом скроле с телефона или открытии/закрытии меню с компонентом ничего такого не происходит. Он не размонтируется и состояния в нем не меняются