You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2022/06/09 10:32:30 UTC
[GitHub] [echarts] xingyinsong opened a new issue, #17192: [Bug] Why the function "cleanup" in useEffect has been called when i init charts?
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.
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-unsubscribe@echarts.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] xingyinsong commented on issue #17192: [Bug] Why the function "cleanup" in useEffect has been called when i init charts?
Posted by GitBox <gi...@apache.org>.
xingyinsong commented on issue #17192:
URL: https://github.com/apache/echarts/issues/17192#issuecomment-1151846592
> Do you use react 18 strict mode?
yes
--
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-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] susiwen8 commented on issue #17192: [Bug] Why the function "cleanup" in useEffect has been called when i init charts?
Posted by GitBox <gi...@apache.org>.
susiwen8 commented on issue #17192:
URL: https://github.com/apache/echarts/issues/17192#issuecomment-1151877768
https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors
--
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-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] susiwen8 commented on issue #17192: [Bug] Why the function "cleanup" in useEffect has been called when i init charts?
Posted by GitBox <gi...@apache.org>.
susiwen8 commented on issue #17192:
URL: https://github.com/apache/echarts/issues/17192#issuecomment-1151878205
Please raise your concern to react, this is not echarts bug
--
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-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] xingyinsong commented on issue #17192: [Bug] Why the function "cleanup" in useEffect has been called when i init charts?
Posted by GitBox <gi...@apache.org>.
xingyinsong commented on issue #17192:
URL: https://github.com/apache/echarts/issues/17192#issuecomment-1151879112
> Please raise your concern to react, this is not echarts bug
Okay, i'll try to find the answer in the site. Thanks a lot.
--
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-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] xingyinsong commented on issue #17192: [Bug] Why the function "cleanup" in useEffect has been called when i init charts?
Posted by GitBox <gi...@apache.org>.
xingyinsong commented on issue #17192:
URL: https://github.com/apache/echarts/issues/17192#issuecomment-1151891595
> Please raise your concern to react, this is not echarts bug
I got it. Thanks again for your help and patience.
--
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-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] susiwen8 commented on issue #17192: [Bug] Why the function "cleanup" in useEffect has been called when i init charts?
Posted by GitBox <gi...@apache.org>.
susiwen8 commented on issue #17192:
URL: https://github.com/apache/echarts/issues/17192#issuecomment-1151877665
https://yuyan.antfin-inc.com/antsports/antsports-mypath/sprints/S29001112398/overview
--
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-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] susiwen8 commented on issue #17192: [Bug] Why the function "cleanup" in useEffect has been called when i init charts?
Posted by GitBox <gi...@apache.org>.
susiwen8 commented on issue #17192:
URL: https://github.com/apache/echarts/issues/17192#issuecomment-1151108721
Do you use react 18?
--
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-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] susiwen8 closed issue #17192: [Bug] Why the function "cleanup" in useEffect has been called when i init charts?
Posted by GitBox <gi...@apache.org>.
susiwen8 closed issue #17192: [Bug] Why the function "cleanup" in useEffect has been called when i init charts?
URL: https://github.com/apache/echarts/issues/17192
--
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-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] susiwen8 commented on issue #17192: [Bug] Why the function "cleanup" in useEffect has been called when i init charts?
Posted by GitBox <gi...@apache.org>.
susiwen8 commented on issue #17192:
URL: https://github.com/apache/echarts/issues/17192#issuecomment-1151856508
This is react 18 feature. Please read react doc.
--
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-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] xingyinsong commented on issue #17192: [Bug] Why the function "cleanup" in useEffect has been called when i init charts?
Posted by GitBox <gi...@apache.org>.
xingyinsong commented on issue #17192:
URL: https://github.com/apache/echarts/issues/17192#issuecomment-1151875610
> This is react 18 feature. Please read react doc.
I still don't understand, could you please tell me more about the reason.
--
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-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org