Next.js component is creating multiple Lightweight Charts - next.js

Question

I was trying to create Lightweight Charts in Next.js. Firstly, I created chart component which accepts chart data as props.
import { createChart, CrosshairMode } from 'lightweight-charts';
import { useEffect, useRef } from 'react';
const CandleStickChart = ({ OHLC_Data }) => {
const chartContainerRef = useRef(null);
useEffect(() => {
const chart = createChart(chartContainerRef.current, {
width: 700,
height: 400,
timeScale: {
timeVisible: true,
secondsVisible: false,
fixLeftEdge: true,
fixRightEdge: true,
},
crosshair: {
mode: CrosshairMode.Normal,
},
});
const candleSeries = chart.addCandlestickSeries({
priceFormat: {
type: 'price',
minMove: 0.00001,
precision: 5,
},
});
candleSeries.setData(OHLC_Data);
}, [OHLC_Data]);
return <div ref={chartContainerRef} />;
};
export default CandleStickChart;
In page component, I used getServerSideProps to fetch the data required for chart.
import { useCallback, useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import Image from 'next/image';
const CandleStickChart = dynamic(
() => import('../../components/CandleStickChart'),
{ ssr: false }
);
import { fetchTimeSeries } from '../../utils/fetchData';
const ForexPair = ({ meta, hour, day, week }) => {
const { currency_base, currency_quote, symbol, type } = meta;
const [logos, setLogos] = useState(null);
return (
<>
<CandleStickChart OHLC_Data={hour.values} />
<CandleStickChart OHLC_Data={day.values} />
<CandleStickChart OHLC_Data={week.values} />
</>
);
};
export default ForexPair;
export async function getServerSideProps(context) {
const { params, res } = context;
const { pairSymbol } = params;
res.setHeader(
'Cache-Control',
'public, s-maxage=300, stale-while-revalidate=3600'
);
const { meta, hour, day, week } = await fetchTimeSeries(
pairSymbol.replace('-', '/')
);
return {
props: {
meta,
hour,
day,
week,
},
};
}
I excluded some unnecessary codes. fetchTimeSeries function is just asynchronous function to fetch data for third party api. getServerSideProps is returning data format required in <CandleStickChart /> component.
What I expect to see is total 3 charts since I only included 3 components. but I am seeing two of each charts, total of 6 charts.
Please dont yell at me if my code looks terrible, I am new to Next.js :D. I really have no idea what is happening in my app.
p.s Charts are displaying correctly, just seeing duplicate charts for each. Thanks in advance. :D

Answer 1

It has to do with the way React & useEffect works under the hood.
Just add
return () => {
chart.remove();
};
after candleSeries.setData(OHLC_Data); and you won't see duplications :)