Sync prop changes about react-native-echarts HOT 4 CLOSED

Ok, after some searching on other github repos solution seems to be:

const [chartInstance, setChartInstance] = useState<EChartsType | null>(null);
  const skiaRef = useRef(null);

  useEffect(() => {
    let chart: EChartsType | null = null;
    if (skiaRef.current && !chartInstance) {
      chart = echarts.init(skiaRef.current, 'light', {
        renderer: 'svg',
        width: E_WIDTH,
        height: E_HEIGHT,
      });
      chart.setOption(options);
      setChartInstance(chart);
      return () => chart?.dispose();
    }
  }, []);

  useEffect(() => {
    chartInstance?.setOption(options);
  }, [data]);

Hope that is correct implementation. Original link: https://github.com/windalfin/fasttt/blob/ff30b40a040700e5fc99f807fa96cda3951ca01d/src/components/HomePage/FastingProgressGauge.tsx#L86-L105

from react-native-echarts.

Ok, after some searching on other github repos solution seems to be:

const [chartInstance, setChartInstance] = useState<EChartsType | null>(null);
  const skiaRef = useRef(null);

  useEffect(() => {
    let chart: EChartsType | null = null;
    if (skiaRef.current && !chartInstance) {
      chart = echarts.init(skiaRef.current, 'light', {
        renderer: 'svg',
        width: E_WIDTH,
        height: E_HEIGHT,
      });
      chart.setOption(options);
      setChartInstance(chart);
      return () => chart?.dispose();
    }
  }, []);

  useEffect(() => {
    chartInstance?.setOption(options);
  }, [data]);

Hope that is correct implementation. Original link: https://github.com/windalfin/fasttt/blob/ff30b40a040700e5fc99f807fa96cda3951ca01d/src/components/HomePage/FastingProgressGauge.tsx#L86-L105

@alexey-yarmosh Did this approach solve your problem? This is the correct implementation. When options change, instead of re-creating the echart instance, directly call setOption to re-render the chart.

However, some users still find that page switching is too fast and errors occasionally occur. After the echart instance is destroyed, some internal operations may continue to cause errors. like this discussion. We also submitted a PR to zrender to solve the change problem, but the PR is still waiting for official verification and merging.

from react-native-echarts.

Yes, seems to be working for now. If some issues arise I'll get back here.
Also probably that usage worth documenting on the website, I can assist with that if needed.

from react-native-echarts.

Yes, seems to be working for now. If some issues arise I'll get back here. Also probably that usage worth documenting on the website, I can assist with that if needed.

Thank you for your suggestion. Welcome to submit a PR to write the document. This way you can provide more examples.
This issue will be closed. If you have other questions, welcome to open a new issue.

from react-native-echarts.