Почему мой компонент реакции продолжает перерисовку?

Question

Я пытаюсь встроить календарь tockify в компонент в рамках проекта реакции, который я создаю. Я должен отметить, что я использую библиотеку с именем response-script-tag, которая позволяет мне использовать теги <script/> в моем компоненте. В любом случае, календарь выполняет рендеринг, но затем продолжает рендеринг, как будто он застрял в каком-то l oop. У меня такое чувство, что мне нужно реализовать какой-то метод жизненного цикла. Какие-либо предложения? Введите следующий код:

import React from 'react'
import Nav from './Nav'
import ScriptTag from 'react-script-tag'

class Events extends React.Component {

    render() {
    return (
        <div>
            <Nav/>
             <div data-tockify-component="calendar" data-tockify-calendar="hzevents2"></div>
            <ScriptTag isHydrating={false} data-cfasync="false" data-tockify-script="embed" src="https://public.tockify.com/browser/embed.js"></ScriptTag> 
        </div>
    )
    }
}

export default Events

Answer 1

Используйте React.PureComponent вместо React.Component, потому что React.PureComponent предотвратит повторный рендеринг, если нет необходимости или обновления.

Answer 2

В документации по тегу response-script указано:

Рекомендуется размещать тег Script в компоненте, который отображается только один раз за все время существования вашего приложения. В противном случае новый тег

будет добавляться каждый раз при повторном монтировании компонента. В будущем есть планы предотвратить это.

Вы можете использовать чистый компонент, чтобы предотвратить повторную визуализацию.

Edit: Независимо от моего ответа, вы должны показать остальную часть вашего кода, чтобы иметь возможность обнаружить проблему.