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

[ChenMatsu]

🐛 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

🏞 Expected result

預期記憶體使用量 實際執行五分使用量

🚑 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"
    }

[ChenMatsu]

目前透過下列寫法 暫時解決記憶體問題... 只是似乎很難搭配動畫或者透過計時器去遞增/遞減百分比來達成動畫特效。

useEffect(() => {
        const gaugeOne = new Gauge("solo-press-machine-gauge-one", soloPressMachineGaugeConfig);
        gaugeOne.update(soloPressMachineGaugeConfig);
        gaugeOne.changeData(+D100.value / 1000);
        return () => {
            if (gaugeOne) {
                gaugeOne.destroy();
            }
        };
    }, [D100]);

    useEffect(() => {
        const gaugeTwo = new Gauge("solo-press-machine-gauge-two", soloPressMachineTwoGaugeConfig);
        gaugeTwo.update(soloPressMachineTwoGaugeConfig);
        gaugeTwo.changeData(+D4.value / 100);
        return () => {
            if (gaugeTwo) {
                gaugeTwo.destroy();
            }
        };
    }, [D4]);