refactor(react/ribbon): use effects for event handling

apps/client/src/widgets/react/hooks.tsx

@@ -15,14 +15,31 @@ import { RefObject, VNode } from "preact";
 import { Tooltip } from "bootstrap";
 import { CSSProperties } from "preact/compat";
 
+/**
+ * Allows a React component to listen to Trilium's legacy event system.
+ * 
+ * The handler works by registering the event listener on the parent legacy component.
+ * 
+ * @param eventName the event to listen on.
+ * @param handler the callback to be invoked when the event is triggered.
+ */
 export function useTriliumEvent<T extends EventNames>(eventName: T, handler: (data: EventData<T>) => void) {
     const parentComponent = useContext(ParentComponent)!;
+    useEffect(() => {
         parentComponent.registerHandler(eventName, handler);
         return (() => parentComponent.removeHandler(eventName, handler));
+    }, [ eventName, handler, parentComponent ])
 }
 
+/**
+ * Similar to {@link useTriliumEvent}, but listens to multiple events at once.
+ * 
+ * @param eventNames the events to listen on.
+ * @param handler the callback to be invoked when one of the events is triggered. The name of the event is provided as the second argument.
+ */
 export function useTriliumEvents<T extends EventNames>(eventNames: T[], handler: (data: EventData<T>, eventName: T) => void) {
     const parentComponent = useContext(ParentComponent)!;
+    useEffect(() => {
         const handlers: ({ eventName: T, callback: (data: EventData<T>) => void })[] = [];
     
         for (const eventName of eventNames) {
@@ -40,6 +57,7 @@ export function useTriliumEvents<T extends EventNames>(eventNames: T[], handler:
                 parentComponent.removeHandler(eventName, callback);
             }
         });
+    }, [ eventNames, handler, parentComponent ]);
 }
 
 export function useSpacedUpdate(callback: () => void | Promise<void>, interval = 1000) {