fix rerender issue with formula card (#6058)

* fix infinite rerender

* note

* remove React import

Author: matt-fidd

packages/desktop-client/src/components/reports/reports/Formula.tsx

@@ -2,6 +2,7 @@ import {
   useState,
   useRef,
   useCallback,
+  useMemo,
   Suspense,
   lazy,
   type ChangeEvent,
@@ -92,12 +93,8 @@ function FormulaInner({ widget }: FormulaInnerProps) {
     error,
   } = useFormulaExecution(formula, queriesRef.current, queriesVersion);
 
-  // Execute color formula with access to main result via named expression
-  const { result: colorResult, error: colorError } = useFormulaExecution(
-    colorFormula,
-    queriesRef.current,
-    queriesVersion,
-    {
+  const colorVariables = useMemo(
+    () => ({
       RESULT: result ?? 0,
       ...Object.entries(themeColors).reduce(
         (acc, [key, value]) => {
@@ -106,7 +103,14 @@ function FormulaInner({ widget }: FormulaInnerProps) {
         },
         {} as Record<string, string>,
       ),
-    },
+    }),
+    [result, themeColors],
+  );
+  const { result: colorResult, error: colorError } = useFormulaExecution(
+    colorFormula,
+    queriesRef.current,
+    queriesVersion,
+    colorVariables,
   );
 
   const handleQueriesChange = useCallback(
@@ -387,16 +391,7 @@ function FormulaInner({ widget }: FormulaInnerProps) {
               <Suspense fallback={<div style={{ height: 32 }} />}>
                 <FormulaEditor
                   value={colorFormula}
-                  variables={{
-                    RESULT: result ?? 0,
-                    ...Object.entries(themeColors).reduce(
-                      (acc, [key, value]) => {
-                        acc[`theme_${key}`] = value;
-                        return acc;
-                      },
-                      {} as Record<string, string>,
-                    ),
-                  }}
+                  variables={colorVariables}
                   onChange={setColorFormula}
                   mode="query"
                   queries={queriesRef.current}

packages/desktop-client/src/components/reports/reports/FormulaCard.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { View } from '@actual-app/components/view';
@@ -42,12 +42,8 @@ export function FormulaCard({
     meta?.queriesVersion,
   );
 
-  // Execute color formula with access to main result via named expression
-  const { result: colorResult, error: colorError } = useFormulaExecution(
-    colorFormula,
-    meta?.queries || {},
-    meta?.queriesVersion,
-    {
+  const colorVariables = useMemo(
+    () => ({
       RESULT: result ?? 0,
       ...Object.entries(themeColors).reduce(
         (acc, [key, value]) => {
@@ -56,7 +52,14 @@ export function FormulaCard({
         },
         {} as Record<string, string>,
       ),
-    },
+    }),
+    [result, themeColors],
+  );
+  const { result: colorResult, error: colorError } = useFormulaExecution(
+    colorFormula,
+    meta?.queries || {},
+    meta?.queriesVersion,
+    colorVariables,
   );
 
   // Determine the custom color from color formula result

upcoming-release-notes/6058.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [matt-fidd]
+---
+
+Fix high CPU usage when using experimental formula report