From e7b448e2bc45636b5fbccfb06411bee72fe523c5 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 14 Aug 2025 19:55:45 +0300
Subject: [PATCH] fix(react/settings): event leak in useOption

---
 apps/client/src/widgets/react/hooks.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx
index fd3f4763e..0e8e19603 100644
--- a/apps/client/src/widgets/react/hooks.tsx
+++ b/apps/client/src/widgets/react/hooks.tsx
@@ -1,4 +1,4 @@
-import { type Dispatch, type StateUpdater, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { EventData, EventNames } from "../../components/app_context";
 import { ParentComponent } from "./ReactBasicWidget";
 import SpacedUpdate from "../../services/spaced_update";
@@ -73,20 +73,22 @@ export function useTriliumOption(name: OptionNames, needsRefresh?: boolean): [st
     const initialValue = options.get(name);
     const [ value, setValue ] = useState(initialValue);
 
-    async function wrappedSetValue(newValue: string) {
-        await options.save(name, newValue);
+    const wrappedSetValue = useMemo(() => {
+        return async (newValue: string) => {
+            await options.save(name, newValue);
 
-        if (needsRefresh) {
-            reloadFrontendApp(`option change: ${name}`);
+            if (needsRefresh) {
+                reloadFrontendApp(`option change: ${name}`);
+            }
         }
-    };
+    }, [ name, needsRefresh ]);
 
-    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+    useTriliumEvent("entitiesReloaded", useCallback(({ loadResults }) => {
         if (loadResults.getOptionNames().includes(name)) {
             const newValue = options.get(name);
             setValue(newValue);
         }
-    });
+     }, [ name ]));
 
     return [
         value,