Multiple renders of TradingView Widget

Question

I am using a real-time chart from tradingview.com but that chart is rendering two times at the starting and whenenever I am changing something in my code that chart in rendering again. Due to that there are multiple renders as I have shown you in the image. If any one who's how can I resolve this then please let me know. I am sharing code of that chart component for your convenience.

// TradingViewWidget.jsx
import React, { useEffect, useRef, memo } from 'react';

function TradingViewWidget() {
    const container = useRef();

    useEffect(() => {
        const script = document.createElement("script");
        script.src = "https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js";
        script.type = "text/javascript";
        script.async = true;
        script.innerHTML = `
            {
                "autosize": true,
                "symbol": "BITSTAMP:BTCUSD",
                "interval": "D",
                "timezone": "Etc/UTC",
                "theme": "light",
                "style": "3",
                "locale": "en",
                "enable_publishing": false,
                "gridColor": "rgba(0, 0, 0, 0.06)",
                "hide_top_toolbar": true,
                "hide_legend": true,
                "save_image": false,
                "calendar": false,
                "hide_volume": true,
                "support_host": "https://www.tradingview.com"
            }`;
        container.current.appendChild(script);
        },[]);

    return (
        <div className="tradingview-widget-container" ref={container} style={{ height: "100%", width: "100%" }}>
            <div className="tradingview-widget-container__widget" style={{ height: "calc(100% - 32px)", width: "100%" }}>
            </div>
            <div className="tradingview-widget-copyright">
                <a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank">
                    <span className="blue-text">
                        Track all markets on TradingView
                    </span>
                </a>
            </div>
        </div>
    );
}

export default memo(TradingViewWidget);

Answer 1

This is mostly likely because React will run your useEffect twice in development mode.

As per the React docs:

With Strict Mode, you immediately see that there is a problem (the number of active connections jumps to 2). Strict Mode runs an extra setup+cleanup cycle for every Effect. This Effect has no cleanup logic, so it creates an extra connection but doesn’t destroy it. This is a hint that you’re missing a cleanup function.

Strict Mode lets you notice such mistakes early in the process. When you fix your Effect by adding a cleanup function in Strict Mode, you also fix many possible future production bugs like the select box from before.

Source: https://react.dev/reference/react/StrictMode#fixing-bugs-found-by-re-running-effects-in-development

One solution is to prove a cleanup function (the return value from useEffect that finds and removes the script that the useEffect body has added.