Why does my react component keep re-rendering?

user_13611429 0
Viewed 151

I'm trying to embed a tockify calender into a component, within a react project I'm building. I should note that I'm using a library called react-script-tag that allows me to use <script/> tags within my component. Anyway, the calender is rendering - but then keeps on re-rendering as if it's stuck in some sort of loop. I have a feeling I need to implement some sort of lifecycle method. Any suggestions? Code as follows:

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
reactjs lifecycle javascript
2 Answers

The documentation of 'react-script-tag' says

It is recommended that the Script tag is placed in a component that only renders once in the entire life of your app. Otherwise, a new

tag will be appended each time the component mounts again. There are plans down the road to prevent this.

You may want to use a pure component to prevent rerendering.

Edit: Regardless of my answer you should show the rest of your code to be able to detect the problem.

user_79421170

Use React.PureComponent instead of React.Component because of React.PureComponent will prevent to re-rendering if there is no need or update.

user_54564760
Related