[Maintenance] Remove raw variables in render (#5718)

* Remove usage of raw variables in renders

* Release notes

* Update status

* Fix typecheck error

packages/desktop-client/src/components/filters/SavedFilterMenuButton.tsx

@@ -48,7 +48,7 @@ export function SavedFilterMenuButton({
   const [menuItem, setMenuItem] = useState('');
   const [name, setName] = useState(filterId?.name ?? '');
   const id = filterId?.id;
-  let savedFilter: SavedFilter;
+  const originalSavedFilter = useRef<SavedFilter | null>(null);
 
   const onFilterMenuSelect = async (item: string) => {
     setMenuItem(item);
@@ -68,7 +68,7 @@ export function SavedFilterMenuButton({
         setErr(null);
         setAdding(false);
         setMenuOpen(false);
-        savedFilter = {
+        originalSavedFilter.current = {
           conditions,
           conditionsOp,
           id: filterId?.id,
@@ -76,7 +76,7 @@ export function SavedFilterMenuButton({
           status: 'saved',
         };
         const response = await sendCatch('filter-update', {
-          state: savedFilter,
+          state: originalSavedFilter.current,
           filters: [...savedFilters],
         });
 
@@ -86,7 +86,7 @@ export function SavedFilterMenuButton({
           return;
         }
 
-        onReloadSavedFilter(savedFilter, 'update');
+        onReloadSavedFilter(originalSavedFilter.current, 'update');
         break;
       case 'save-filter':
         setErr(null);
@@ -96,11 +96,13 @@ export function SavedFilterMenuButton({
         break;
       case 'reload-filter':
         setMenuOpen(false);
-        savedFilter = {
-          ...savedFilter,
-          status: 'saved',
-        };
-        onReloadSavedFilter(savedFilter, 'reload');
+        if (originalSavedFilter.current) {
+          originalSavedFilter.current = {
+            ...originalSavedFilter.current,
+            status: 'saved',
+          };
+          onReloadSavedFilter(originalSavedFilter.current, 'reload');
+        }
         break;
       case 'clear-filter':
         setMenuOpen(false);

packages/desktop-client/src/components/reports/graphs/LineGraph.tsx

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import React, { useState, type CSSProperties } from 'react';
+import React, { useMemo, useState, type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { AlignedText } from '@actual-app/components/aligned-text';
@@ -58,8 +58,23 @@ const CustomTooltip = ({
   format,
 }: CustomTooltipProps) => {
   const { t } = useTranslation();
-  if (active && payload && payload.length) {
-    let sumTotals = 0;
+  const { sumTotals, items } = useMemo(() => {
+    return (payload ?? [])
+      .sort((p1: PayloadItem, p2: PayloadItem) => p2.value - p1.value)
+      .reduce(
+        (acc, item) => {
+          acc.sumTotals += item.value;
+          acc.items.push(item);
+          return acc;
+        },
+        {
+          sumTotals: 0,
+          items: [] as PayloadItem[],
+        },
+      );
+  }, [payload]);
+
+  if (active && items.length) {
     return (
       <div
         className={css({
@@ -77,25 +92,22 @@ const CustomTooltip = ({
             <strong>{payload[0].payload.date}</strong>
           </div>
           <div style={{ lineHeight: 1.5 }}>
-            {payload
-              .sort((p1: PayloadItem, p2: PayloadItem) => p2.value - p1.value)
-              .map((p: PayloadItem, index: number) => {
-                sumTotals += p.value;
-                return (
-                  (compact ? index < 4 : true) && (
-                    <AlignedText
-                      key={index}
-                      left={p.dataKey}
-                      right={format(p.value, 'financial')}
-                      style={{
-                        color: p.color,
-                        textDecoration:
-                          tooltip === p.dataKey ? 'underline' : 'inherit',
-                      }}
-                    />
-                  )
-                );
-              })}
+            {items.map((p: PayloadItem, index: number) => {
+              return (
+                (compact ? index < 4 : true) && (
+                  <AlignedText
+                    key={index}
+                    left={p.dataKey}
+                    right={format(p.value, 'financial')}
+                    style={{
+                      color: p.color,
+                      textDecoration:
+                        tooltip === p.dataKey ? 'underline' : 'inherit',
+                    }}
+                  />
+                )
+              );
+            })}
             {payload.length > 5 && compact && '...'}
             <AlignedText
               left={t('Total')}

packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import React, { useState, type CSSProperties } from 'react';
+import React, { useMemo, useState, type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { AlignedText } from '@actual-app/components/aligned-text';
@@ -62,8 +62,24 @@ const CustomTooltip = ({
   format,
 }: CustomTooltipProps) => {
   const { t } = useTranslation();
-  if (active && payload && payload.length) {
-    let sumTotals = 0;
+  const { sumTotals, items } = useMemo(() => {
+    return (payload ?? [])
+      .slice(0)
+      .reverse()
+      .reduce(
+        (acc, item) => {
+          acc.sumTotals += item.value;
+          acc.items.push(item);
+          return acc;
+        },
+        {
+          sumTotals: 0,
+          items: [] as PayloadItem[],
+        },
+      );
+  }, [payload]);
+
+  if (active && items.length) {
     return (
       <div
         className={css({
@@ -81,27 +97,23 @@ const CustomTooltip = ({
             <strong>{label}</strong>
           </div>
           <div style={{ lineHeight: 1.4 }}>
-            {payload
-              .slice(0)
-              .reverse()
-              .map((pay, i) => {
-                sumTotals += pay.value;
-                return (
-                  pay.value !== 0 &&
-                  (compact ? i < 5 : true) && (
-                    <AlignedText
-                      key={pay.name}
-                      left={pay.name}
-                      right={format(pay.value, 'financial')}
-                      style={{
-                        color: pay.color,
-                        textDecoration:
-                          tooltip === pay.name ? 'underline' : 'inherit',
-                      }}
-                    />
-                  )
-                );
-              })}
+            {items.map((pay, i) => {
+              return (
+                pay.value !== 0 &&
+                (compact ? i < 5 : true) && (
+                  <AlignedText
+                    key={pay.name}
+                    left={pay.name}
+                    right={format(pay.value, 'financial')}
+                    style={{
+                      color: pay.color,
+                      textDecoration:
+                        tooltip === pay.name ? 'underline' : 'inherit',
+                    }}
+                  />
+                )
+              );
+            })}
             {payload.length > 5 && compact && '...'}
             <AlignedText
               left={t('Total')}

upcoming-release-notes/5718.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Remove usage of raw variables in renders