antvis / antvis/G2Plot

🤔 [QUESTION] 接收MQTT 即時資料渲染Gauge造成記憶體用量暴增

Open
#3,224 1 comment 0 reactions 0 assignees View on GitHub
Question
Dominant language
TypeScript
Stars
2.7k
Forks
591
PR merge metrics
No merged PRs in 30d

Description

### 🐛 Question description [Please make everyone to understand it]

透過Redux-Toolkit管理資料狀態,將從Mqtt接收到的即時資料送進Redux Store後,Gauge根據useAppSelector會重新 / 重覆Render同時造成記憶體用量暴增,最終導致Chrome關閉分頁。不確定這是否算是Bug。即便useAppSelector的狀態改變觸發儀表板重新渲染也應當會清除先前舊的儀表板,但觀測下來似乎並沒有清除。透過Chrome Dev Memory Profile可以觀測到Gauge and Chart佔用相當高的記憶體。

### 💻 Link to minimal reproduction

[Codepen Sandbox](https://codesandbox.io/s/solopressmachinegauge-1euwie?file=/src/features/solo-press-machine/SoloPressMachineGauge.tsx)

### 🏞 Expected result
[預期記憶體使用量](https://imgur.com/a/IxBnfzY)
[實際執行五分使用量](https://imgur.com/a/EYjMYH0)

### 🚑 Any additional [like screenshots]

* **G2Plot Version**: V2.4.15
* **Platform**:
```
"dependencies": {
"@ant-design/charts": "^1.3.6",
"@antv/g2plot": "^2.4.15",
"@opd/g2plot-react": "^2.12.0",
"@reduxjs/toolkit": "^1.8.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"@types/jest": "^24.9.1",
"@types/node": "^12.20.47",
"@types/react": "^16.14.24",
"@types/react-dom": "^18.0.0",
"@types/react-redux": "^7.1.23",
"antd": "^4.19.5",
"axios": "^0.27.2",
"dayjs": "^1.11.0",
"i18next": "^21.6.14",
"mqtt": "^4.3.7",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-full-screen": "^1.1.0",
"react-i18next": "^11.16.2",
"react-icons": "^4.3.1",
"react-pdf": "^5.7.2",
"react-redux": "^7.2.8",
"react-router-dom": "^6.3.0",
"react-scripts": "4.0.3",
"react-simple-keyboard": "^3.4.129",
"react-spring": "^9.4.4",
"react-step-wizard": "^5.3.11",
"sass": "^1.50.0",
"typescript": "~4.1.5"
}
```

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodeSandbox reproduction at src/features/solo-press-machine/SoloPressMachineGauge.tsx and reproduce the issue while watching Chrome Dev Memory Profile. Trace how MQTT data reaches the Redux Store and how Gauge and Chart re-render, then compare memory use with the expected and actual profiles. Done means identifying whether old dashboard instances are retained and documenting or fixing the cause.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
data-visualization, frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.