Memoize more in AllPerformanceGraph

Affects issues:
- Possibly fixed #4490

Author: AuroraLS3

Plan/react/dashboard/src/components/cards/server/graphs/PerformanceGraphsCard.jsx

@@ -6,7 +6,7 @@ import {useTranslation} from "react-i18next";
 import {Card} from "react-bootstrap";
 import CardTabs from "../../../CardTabs";
 import {faGears, faHdd, faMap, faMicrochip, faSignal, faTachometerAlt} from "@fortawesome/free-solid-svg-icons";
-import React, {useEffect, useState} from "react";
+import React, {useEffect, useMemo, useState} from "react";
 import {ChartLoader} from "../../../navigation/Loader";
 import AllPerformanceGraph from "../../../graphs/performance/AllPerformanceGraph";
 import TpsPerformanceGraph from "../../../graphs/performance/TpsPerformanceGraph";
@@ -77,14 +77,13 @@ const PerformanceGraphsCard = () => {
         data: pluginHistory,
         loadingError: pluginHistoryLoadingError
     } = useDataRequest(fetchPluginHistory, [identifier], authRequired && hasPermission('page.server.plugin.history'));
-    const [pluginHistorySeries, setPluginHistorySeries] = useState(undefined);
 
     useEffect(() => {
         if (data) {
             mapPerformanceDataToSeries(data.values).then(parsed => setParsedData(parsed))
         }
     }, [data, setParsedData]);
-    useEffect(() => {
+    const pluginHistorySeries = useMemo(() => {
         // https://stackoverflow.com/a/34890276/20825073
         const groupBy = function (xs, key) {
             return xs.reduce(function (rv, x) {
@@ -95,7 +94,7 @@ const PerformanceGraphsCard = () => {
 
         if (pluginHistory) {
             const grouped = groupBy(pluginHistory.history.reverse(), 'modified');
-            setPluginHistorySeries({
+            return {
                 type: 'flags',
                 accessibility: {
                     exposeAsGroupOnly: true,
@@ -113,9 +112,9 @@ const PerformanceGraphsCard = () => {
                             (uninstalledLines.length ? '<br><b>' + t('html.label.uninstalled') + '</b><br>' + uninstalledLines : '')
                     }
                 })
-            })
+            };
         }
-    }, [pluginHistory, setPluginHistorySeries, t]);
+    }, [pluginHistory, t]);
 
     const tabs = [
         {

Plan/react/dashboard/src/components/graphs/performance/AllPerformanceGraph.jsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 
 import {hasValuesInSeries, tooltip, translateLinegraphButtons} from "../../../util/graphs";
 import Highcharts from "highcharts/esm/highstock";
@@ -9,7 +9,7 @@ import {useTheme} from "../../../hooks/themeHook";
 import {useMetadata} from "../../../hooks/metadataHook";
 import {useAuth} from "../../../hooks/authenticationHook.tsx";
 import {useGraphExtremesContext} from "../../../hooks/interaction/graphExtremesContextHook.jsx";
-import {localeService} from "../../../service/localeService.js";
+import {useI18nFriendlyLanguage} from "../../../service/localeService.js";
 import {usePingFormatter} from "../../../util/format/usePingFormatter.js";
 
 const AllPerformanceGraph = ({id, data, dataSeries, pluginHistorySeries}) => {
@@ -18,10 +18,11 @@ const AllPerformanceGraph = ({id, data, dataSeries, pluginHistorySeries}) => {
     const {timeZoneOffsetMinutes} = useMetadata();
     const {hasPermission} = useAuth();
     const {extremes, onSetExtremes} = useGraphExtremesContext();
-    const [graph, setGraph] = useState(undefined);
     const {formatPing} = usePingFormatter();
 
-    const yAxis = [
+    const [graph, setGraph] = useState(undefined);
+
+    const yAxis = useMemo(() => [
         {
             labels: {
                 formatter: function () {
@@ -81,7 +82,7 @@ const AllPerformanceGraph = ({id, data, dataSeries, pluginHistorySeries}) => {
             softMin: 0,
             softMax: 50
         },
-    ]
+    ], [formatPing]);
 
     const onResize = useCallback(() => {
         let chartElement = document.getElementById(id);
@@ -107,7 +108,7 @@ const AllPerformanceGraph = ({id, data, dataSeries, pluginHistorySeries}) => {
         }
     }, [onResize])
 
-    useEffect(() => {
+    const chart = useMemo(() => {
         const zones = {
             tps: [{
                 value: data.zones.tpsThresholdMed,
@@ -183,14 +184,7 @@ const AllPerformanceGraph = ({id, data, dataSeries, pluginHistorySeries}) => {
             } : undefined
         };
 
-        Highcharts.setOptions({
-            lang: {
-                locale: localeService.getIntlFriendlyLocale(),
-                noData: t('html.label.noDataToDisplay')
-            }
-        })
-        Highcharts.setOptions(graphTheming);
-        setGraph(Highcharts.stockChart(id, {
+        return {
             chart: {
                 noData: t('html.label.noDataToDisplay')
             },
@@ -219,7 +213,22 @@ const AllPerformanceGraph = ({id, data, dataSeries, pluginHistorySeries}) => {
                 timezoneOffset: timeZoneOffsetMinutes
             },
             series: [series.playersOnline, series.tps, series.mspt, series.cpu, series.ram, series.entities, series.chunks, pluginHistorySeries].filter(s => s)
-        }));
+        }
+    }, [data, dataSeries, pluginHistorySeries, hasPermission, t, onSetExtremes, timeZoneOffsetMinutes, nightModeEnabled]);
+
+    const locale = useI18nFriendlyLanguage();
+    useEffect(() => {
+        Highcharts.setOptions({
+            lang: {
+                locale: locale,
+                noData: t('html.label.noDataToDisplay')
+            }
+        })
+    }, [locale]);
+
+    useEffect(() => {
+        Highcharts.setOptions(graphTheming);
+        setGraph(Highcharts.stockChart(id, chart));
     }, [data, dataSeries, graphTheming, nightModeEnabled, id, t, timeZoneOffsetMinutes, pluginHistorySeries])
     useEffect(() => {
         if (graph?.xAxis?.length && extremes) {