🤔 [QUESTION] 接收MQTT 即時資料渲染Gauge造成記憶體用量暴增
- 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
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