skip to Main Content

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);

2

Answers


  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.

    Login or Signup to reply.
  2. Hey I found the solution
    Asked chatGpt to look for errors and it provided some potential mistakes that might be the reason for rendering the TradingViewWidget twice

    Solution:
    Remove Strict mode on your main.js or index.js

    ReactDOM.render(, document.getElementById("root"));

    It worked for me

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search