From 5723aa2c390cbbc5e541d0cff2e90cb5dbfcd55a Mon Sep 17 00:00:00 2001
From: ericsocrat <ericsocrat@users.noreply.github.com>
Date: Fri, 1 May 2026 13:07:16 +0200
Subject: [PATCH] fix(frontend): resolve set-state-in-effect in SettingsPage
 (#1063)

Replaces useEffect that synced country/language state from useQuery prefs result with the React 19 'adjust state during render' pattern (https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes). A prevPrefs state tracks the last seen query result; when prefs identity changes, the new values are written before render completes. Behaviour is unchanged - the form still populates after the query resolves and after refetches.
---
 frontend/src/app/app/settings/page.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/app/settings/page.tsx b/frontend/src/app/app/settings/page.tsx
index 7fea5f00..ad705e09 100644
--- a/frontend/src/app/app/settings/page.tsx
+++ b/frontend/src/app/app/settings/page.tsx
@@ -51,13 +51,17 @@ export default function ProfileSettingsPage() {
   const { showConfirmDialog, confirmNavigation, cancelNavigation } =
     useUnsavedChanges(dirty);
 
-  // Populate from fetched prefs
-  useEffect(() => {
+  // Populate from fetched prefs — adjust state during render when the
+  // upstream query result changes (avoids react-hooks/set-state-in-effect).
+  // See https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
+  const [prevPrefs, setPrevPrefs] = useState(prefs);
+  if (prefs !== prevPrefs) {
+    setPrevPrefs(prefs);
     if (prefs) {
       setCountry(prefs.country ?? "");
       setLanguage((prefs.preferred_language ?? "en") as SupportedLanguage);
     }
-  }, [prefs]);
+  }
 
   function markDirty() {
     setDirty(true);