[GitHub] [echarts] xingyinsong opened a new issue, #17192: [Bug] Why the function "cleanup" in useEffect has been called when i init charts?

[GitBox]

xingyinsong opened a new issue, #17192:
URL: https://github.com/apache/echarts/issues/17192

   ### Version
   
   5.3.2
   
   ### Link to Minimal Reproduction
   
   _No response_
   
   ### Steps to Reproduce
   
   **This is my code:**
   ```javascript
   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:**
   ```javascript
   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.
   
   
![image](https://user-images.githubusercontent.com/104756033/172825863-b6310276-9284-4cd6-8f68-891d37054863.png)
   
   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
   
   ```markdown
   - 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.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org