TypeError: Cannot read properties of undefined (reading '_internal_addDataSource') about lightweight-charts

[illetid]

Hi, for cases like this when you have some race conditions, we suggest you use React.useRef to check if the component is still mounted.

const isMounted = useRef(true);

  useEffect(
        () => {
          const chart = createChart(chartContainerRef.current, chartOptions)
          candles = await fetchCandles()
          if (isMounted.current) {
             // Do whatever you want to do with chart
             const mainSeries = chart.addCandlestickSeries(candles)
          }

            return () => {
                window.removeEventListener('resize', handleResize);
                isMounted.current = false;
                chart.remove();
            };
        },
        [deps]
    );

Also, you could use AbortController to prevent fetching the data if the component is already unmounted

[0x33dm]

The library is client-side only, so you shouldn't render it on the server;
i'm not rendering on the server, on the server i show a "skeleton"

in the case of the modern Next.js, you should use the 'use client' directive. Regarding accessing some properties after remove(), we don't have plans to change the current behavior, at least in the near future.

thank you, your suggestions and explanations were very helpful.

[0x33dm]

Hi, for cases like this when you have some race conditions, we suggest you use React.useRef to check if the component is still mounted.

Also, you could use AbortController to prevent fetching the data if the component is already unmounted

Thanks for the suggestions @illetid definitely more elegant than my ['isRemoving'] hack.

Still, due the fact this happens with the most basic react example on the documentation when used on Next.js ( due to the re-render nature of hydration, etcs ) wouldn't it make sense to have the library not trying to read some _internal* variable after the remove() method has been called?

[illetid]

The library is client-side only, so you shouldn't render it on the server; in the case of the modern Next.js, you should use the 'use client' directive. Regarding accessing some properties after remove(), we don't have plans to change the current behavior, at least in the near future.