重新加载反应中的图表数据作为道具数据传递

Question

Hello I'm trying to reload data passed as prop data in a react component. I'm using Lightweight Charts library for the charts. But I don't think its has something to do with the library itself except of lacking documenation for reloading chart data. My react code for the specific component looks like this:

import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import { createChart, CrosshairMode } from 'lightweight-charts';


export function ChartComponent(props) {
    const chartContainerRef = useRef();
    const chart = useRef();
    const resizeObserver = useRef();
    const candleSeriesRef = useRef();

    useEffect(() => {

      chart.current = createChart(chartContainerRef.current, {
        width: chartContainerRef.current.clientWidth,
        height: chartContainerRef.current.clientHeight,
        layout: {
          backgroundColor: '#253248',
          textColor: 'rgba(255, 255, 255, 0.9)',
        },
        grid: {
          vertLines: {
            color: '#334158',
          },
          horzLines: {
            color: '#334158',
          },
        },
        crosshair: {
          mode: CrosshairMode.Normal,
        },
        priceScale: {
          borderColor: '#485c7b',
        },
        timeScale: {
          borderColor: '#485c7b',
        },
      });
  
      candleSeriesRef.current = chart.current.addCandlestickSeries({
        upColor: '#4bffb5',
        downColor: '#ff4976',
        borderDownColor: '#ff4976',
        borderUpColor: '#4bffb5',
        wickDownColor: '#838ca1',
        wickUpColor: '#838ca1',
      });
  
      candleSeriesRef.current.setData(props.data);
    }, []);
  

  return (
    <div ref={chartContainerRef} className="chart-container" />
  );
}

Component usage:

    {/* Chart */}
    <Grid item xs={12}>
      <Paper className={fixedHeightPaper}>
        <ChartComponent data={data}/>
      </Paper>
    </Grid>

When I change the data from the parent view the data is not changing. I also tried to call the component useEffect without the last brackets so it gets called every time the props change but then I'm just stacking new charts under the original one. What I want to achieve is to just change the whole data from parent side and reload the chart.

Answer 1

First: Understanding react hooks

useEffect react hook let you perfom an action when a prop/DOM mount/DOM unmount or state changes, so

useEffect(() => {
    //this function will be called every time data prop changes
    return () => {
        //this function will be called after the above function finishes.
        //here you can do cleanup.
    }
},[props.data]) //this array is for all the dependencies/values to watch.

useEffect hook calls the function depending on what is on dependencies,

[]           = function will be called on mount and cleanup on unmount
[some value] = function will be called on mount and only when the value changes
no value     = function will be called on every render

Second: Solution

import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import { createChart, CrosshairMode } from 'lightweight-charts';


export function ChartComponent(props) {
    const chartContainerRef = useRef();
    const chart = useRef();
    const resizeObserver = useRef();
    const candleSeriesRef = useRef();

    useEffect(() => {

      chart.current = createChart(chartContainerRef.current, {
        width: chartContainerRef.current.clientWidth,
        height: chartContainerRef.current.clientHeight,
        layout: {
          backgroundColor: '#253248',
          textColor: 'rgba(255, 255, 255, 0.9)',
        },
        grid: {
          vertLines: {
            color: '#334158',
          },
          horzLines: {
            color: '#334158',
          },
        },
        crosshair: {
          mode: CrosshairMode.Normal,
        },
        priceScale: {
          borderColor: '#485c7b',
        },
        timeScale: {
          borderColor: '#485c7b',
        },
      });
  
      candleSeriesRef.current = chart.current.addCandlestickSeries({
        upColor: '#4bffb5',
        downColor: '#ff4976',
        borderDownColor: '#ff4976',
        borderUpColor: '#4bffb5',
        wickDownColor: '#838ca1',
        wickUpColor: '#838ca1',
      });
  
      candleSeriesRef.current.setData(props.data);
    }, [props.data]);
  

  return (
    <div ref={chartContainerRef} className="chart-container" />
  );
}

Third: improved solution

Recreating chart every time data prop change is too expensive.

import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import { createChart, CrosshairMode } from 'lightweight-charts';


export function ChartComponent(props) {
    const chartContainerRef = useRef();
    const chart = useRef();
    const resizeObserver = useRef();
    const candleSeriesRef = useRef();
    
    //this effect will be called only once, since there is no dependencies.
    useEffect(() => {

      chart.current = createChart(chartContainerRef.current, {
        width: chartContainerRef.current.clientWidth,
        height: chartContainerRef.current.clientHeight,
        layout: {
          backgroundColor: '#253248',
          textColor: 'rgba(255, 255, 255, 0.9)',
        },
        grid: {
          vertLines: {
            color: '#334158',
          },
          horzLines: {
            color: '#334158',
          },
        },
        crosshair: {
          mode: CrosshairMode.Normal,
        },
        priceScale: {
          borderColor: '#485c7b',
        },
        timeScale: {
          borderColor: '#485c7b',
        },
      });
  
      candleSeriesRef.current = chart.current.addCandlestickSeries({
        upColor: '#4bffb5',
        downColor: '#ff4976',
        borderDownColor: '#ff4976',
        borderUpColor: '#4bffb5',
        wickDownColor: '#838ca1',
        wickUpColor: '#838ca1',
      });
    }, []);
    
    //this effect will be called every time data props changes
    useEffect(() => {
      if(chart.current)
      candleSeriesRef.current.setData(props.data);
    }, [props.data]);
  

  return (
    <div ref={chartContainerRef} className="chart-container" />
  );
}

reactjs docs explains it better, https://reactjs.org/docs/hooks-effect.html