From f2ce163b2b5a81f43da6ed2acea4befa308702ca Mon Sep 17 00:00:00 2001
From: diegosouzapw <diegosouza.pw@gmail.com>
Date: Thu, 28 May 2026 17:15:18 -0300
Subject: [PATCH] fix(translator): stabilize tr() with useCallback so
 pipelineSteps useMemo can be preserved

react-hooks/preserve-manual-memoization (React Compiler ESLint plugin)
was flagging the pipelineSteps useMemo because the inner tr() closure
was recreated on every render. Wrapping tr() in useCallback([t]) makes
its identity stable, and adding tr to the useMemo deps array lets the
compiler preserve the manual memoization.

This clears 11 lint errors pre-existing from commit e20330af6 (lift
session to shell). No behavior change.
---
 .../translator/TranslatorPageClient.tsx       | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/translator/TranslatorPageClient.tsx b/src/app/(dashboard)/dashboard/translator/TranslatorPageClient.tsx
index 4d810f41ff..65e655d151 100644
--- a/src/app/(dashboard)/dashboard/translator/TranslatorPageClient.tsx
+++ b/src/app/(dashboard)/dashboard/translator/TranslatorPageClient.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Suspense, useMemo, useState } from "react";
+import { Suspense, useCallback, useMemo, useState } from "react";
 import { useTranslations } from "next-intl";
 import { Badge, Card, SegmentedControl } from "@/shared/components";
 import TranslatorConceptCard from "./components/TranslatorConceptCard";
@@ -41,15 +41,18 @@ function TranslatorPageClientInner() {
     }
   };
 
-  const tr = (key: string, fallback: string): string => {
-    try {
-      const v = t(key as Parameters<typeof t>[0]);
-      if (v === key || v === `translator.${key}`) return fallback;
-      return v as string;
-    } catch {
-      return fallback;
-    }
-  };
+  const tr = useCallback(
+    (key: string, fallback: string): string => {
+      try {
+        const v = t(key as Parameters<typeof t>[0]);
+        if (v === key || v === `translator.${key}`) return fallback;
+        return v as string;
+      } catch {
+        return fallback;
+      }
+    },
+    [t],
+  );
 
   // Build PipelineStep[] from session.result so PipelineView reflects real state
   const pipelineSteps = useMemo<PipelineStep[]>(() => {
@@ -113,7 +116,7 @@ function TranslatorPageClientInner() {
     }
 
     return steps;
-  }, [session.result, sharedInputContent]);
+  }, [session.result, sharedInputContent, tr]);
 
   const advancedSlot = (
     <AdvancedSection forceOpenSlug={state.advanced}>