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
This is mostly likely because React will run your
useEffect
twice in development mode.As per the React docs:
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 theuseEffect
body has added.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