[Bug] Why the function "cleanup" in useEffect has been called when i init charts?

Version

5.3.2

Link to Minimal Reproduction

No response

Steps to Reproduce

This is my code:

import * as echarts from "echarts";
import { useEffect, useRef } from "react";

function MyChart(props) {
  const chartRef = useRef();

  useEffect(() => {
    if (chartRef.current) {
      let myChart = echarts.getInstanceByDom(chartRef.current);

      const resize = function () {
        console.log("resize -> ", myChart);
        myChart.resize();
      };

      if (!myChart) {
        console.log("init");
        myChart = echarts.init(chartRef.current);
        window.addEventListener("resize", resize);
      }
      myChart.setOption(props.option);

      return function cleanup() {
        console.log("cleanup");
        window.removeEventListener("resize", resize);
      };
    }
  }, [props.option]);

  return <div ref={chartRef} className="chart"></div>;
}

export default MyChart;

And i use this compnent like this:

import MyChart from "../../components/echarts/index";
import { useState } from "react";
import { Row, Col } from "antd";

function Home() {
  const [lineChartData, setLineChartData] = useState({...});
  const [barChartData, setBarChartData] = useState({...});
  const [pieChartData, setPieChartData] = useState({...});

  return (
    <div
      className="test-block"
      style={{
        padding: 24,
        minHeight: 360,
      }}
    >
      <Row>
        <Col span={8} order={1}>
          <MyChart option={lineChartData}></MyChart>
        </Col>
        <Col span={8} order={2}>
          <MyChart option={barChartData}></MyChart>
        </Col>
        <Col span={8} order={3}>
          <MyChart option={pieChartData}></MyChart>
        </Col>
      </Row>
    </div>
  );
}

export default Home;

Current Behavior

When i run my refresh the page, i see “init” and “cleanup” on my console.

And after i set a breakpoint at code let myChart = echarts.getInstanceByDom(chartRef.current) and debug, i find each chart has run this code twice. And in the first step, it print “init” on my “console”, and “cleanup” in the second step.

Besides, because the function, “cleanup” has been called, window.removeEventListener("resize", resize) has been called.

So, EventListener has been removed.

Expected Behavior

I expect there has no “cleanup” on my console, because i think the compnent has not been destroyed.

Environment

- OS:Windows10 21H1
- Browser:Chrome 101.0.4951.67
- Framework:React@18.1.0

Any additional comments?

My first issue, i’m sorry for my bad format.

I want to know why things display like this, and what the mistakes i made.

[susiwen8]

Please raise your concern to react, this is not echarts bug

[xingyinsong]

Please raise your concern to react, this is not echarts bug

I got it. Thanks again for your help and patience.