fix(frontend): prevent memory leak from uncleaned storage listener in useFeatureFlag

Dechat/dex_with_fiat_frontend/src/hooks/__tests__/useFeatureFlag.test.ts

@@ -1,4 +1,5 @@
-import { renderHook } from '@testing-library/react';
+import { renderHook, act } from '@testing-library/react';
+import { vi, describe, it, expect, afterEach } from 'vitest';
 import { useFeatureFlag } from '../useFeatureFlag';
 import * as featureFlags from '@/lib/featureFlags';
 
@@ -42,4 +43,45 @@ describe('useFeatureFlag', () => {
 
     expect(result.current).toBe(true);
   });
+
+  // ── memory-leak regression (#1220) ─────────────────────────────────────────
+
+  it('regression: removes storage listener on unmount so it does not leak', () => {
+    const addSpy = vi.spyOn(window, 'addEventListener');
+    const removeSpy = vi.spyOn(window, 'removeEventListener');
+
+    vi.spyOn(featureFlags, 'getFeatureFlag').mockReturnValue(false);
+
+    const { unmount } = renderHook(() => useFeatureFlag('enableHaptics'));
+
+    // A storage listener must have been registered.
+    const storageListeners = addSpy.mock.calls.filter(([type]) => type === 'storage');
+    expect(storageListeners.length).toBeGreaterThan(0);
+
+    const registeredHandler = storageListeners[0][1];
+
+    unmount();
+
+    // On unmount the same handler must be removed — no leak.
+    const removedStorageListeners = removeSpy.mock.calls.filter(
+      ([type, fn]) => type === 'storage' && fn === registeredHandler,
+    );
+    expect(removedStorageListeners.length).toBeGreaterThan(0);
+  });
+
+  it('re-evaluates the flag when a storage event fires', () => {
+    let flagEnabled = false;
+    vi.spyOn(featureFlags, 'getFeatureFlag').mockImplementation(() => flagEnabled);
+
+    const { result } = renderHook(() => useFeatureFlag('enableHaptics'));
+    expect(result.current).toBe(false);
+
+    // Simulate a storage change that flips the flag.
+    flagEnabled = true;
+    act(() => {
+      window.dispatchEvent(new StorageEvent('storage'));
+    });
+
+    expect(result.current).toBe(true);
+  });
 });

Dechat/dex_with_fiat_frontend/src/hooks/useFeatureFlag.ts

@@ -57,17 +57,30 @@ export function useFeatureFlag(flag: FeatureFlag, scrollTargetId?: string) {
       return;
     }
 
-    const newEnabled = getFeatureFlag(flag);
-    setIsEnabled(newEnabled);
-    trackFeatureFlag(flag, newEnabled);
+    function evaluate() {
+      const newEnabled = getFeatureFlag(flag);
+      setIsEnabled(newEnabled);
+      trackFeatureFlag(flag, newEnabled);
 
-    // Auto-scroll behavior: if flag becomes enabled and scrollTargetId is provided, scroll to it
-    if (newEnabled && scrollTargetId && typeof window !== 'undefined') {
-      const element = document.getElementById(scrollTargetId);
-      if (element) {
-        element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      // Auto-scroll behavior: if flag becomes enabled and scrollTargetId is provided, scroll to it
+      if (newEnabled && scrollTargetId && typeof window !== 'undefined') {
+        const element = document.getElementById(scrollTargetId);
+        if (element) {
+          element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
       }
     }
+
+    evaluate();
+
+    // Re-evaluate when another tab or a dev-tools script modifies localStorage so
+    // that flag overrides applied at runtime are picked up without a page reload.
+    // The listener MUST be removed on cleanup — failing to do so leaks it on every
+    // re-render that changes `flag` or `scrollTargetId` (#1220).
+    if (typeof window !== 'undefined') {
+      window.addEventListener('storage', evaluate);
+      return () => window.removeEventListener('storage', evaluate);
+    }
   }, [flag, scrollTargetId]);
 
   return isEnabled;