Avoid data reloading onEvents

[MarcoCadei]

Hi guys, thank you for the amazing library! I just have one problem: when i set an event with the onEvents prop the chart reloads the data! How can i avoid that?

Thank you in advance

[alexPang6]

Notice how with onClick={() => alert('click')}, we’re passing a function as the onClick prop. React will only call this function after a click. Forgetting () => and writing onClick={alert('click')} is a common mistake, and would fire the alert every time the component re-renders.

[alexPang6]

onEvents={{
  click: params => {
    console.log(params);
  }
}}

change to：

    if (
      prevProps.theme !== this.props.theme ||
      !isEqual(prevProps.opts, this.props.opts) ||
      !isEqual(prevProps.onEvents, this.props.onEvents)
    ) {
      this.dispose();

      this.rerender(); // 重建
      return;
    }

https://github.com/hustcc/echarts-for-react/issues/286

[KennyDivert]

onEvents={{
  click: params => {
  console.log(params);
  }
}}

change to：

    if (
      prevProps.theme !== this.props.theme ||
      !isEqual(prevProps.opts, this.props.opts) ||
      !isEqual(prevProps.onEvents, this.props.onEvents)
    ) {
      this.dispose();

      this.rerender(); // 重建
      return;
    }

286

I'm sorry, what exactly do you mean by change to?

[naman13924]

Can some one solve this issue as onEvents is re rendering all the charts in my application and creating a performance issue

[ct-lynch]

I found a possible work around. Don't use onEvents, instead use the ref option, combined with the getEchartsInstance().

const chartRef = useRef(null);

  useEffect(() => {
    let instance = chartRef.current.getEchartsInstance();
    instance.on('datazoom',  () => {console.log('no reload')} )  ;
  }, []);

return (
<ReactEChartsCore
                  echarts={echarts}
                  option={eChartOption}
                  ref={chartRef}>
)