Add memoization in db.rooms hooks (#726)

instantdb · Jan 16, 2025 · a264c5d · a264c5d
1 parent ff2fe2f
commit a264c5d
Showing 1 changed file with 46 additions and 32 deletions.
diff --git a/client/packages/react/src/InstantReactRoom.ts b/client/packages/react/src/InstantReactRoom.ts
@@ -172,12 +172,19 @@ export function usePresence<
     return unsub;
   }, [room.id, opts.user, opts.peers?.join(), opts.keys?.join()]);
 
-  return {
-    ...state,
-    publishPresence: (data) => {
+  const publishPresence = useCallback(
+    (data) => {
       room._core._reactor.publishPresence(room.type, room.id, data);
     },
-  };
+    [room.type, room.id],
+  );
+  const ret = useMemo(() => {
+    return {
+      ...state,
+      publishPresence,
+    };
+  }, [state, publishPresence]);
+  return ret;
 }
 
 /**
@@ -233,7 +240,7 @@ export function useTypingIndicator<
 ): TypingIndicatorHandle<RoomSchema[RoomType]["presence"]> {
   const timeout = useTimeout();
 
-  const onservedPresence = rooms.usePresence(room, {
+  const observedPresence = rooms.usePresence(room, {
     keys: [inputName],
   });
 
@@ -248,40 +255,47 @@ export function useTypingIndicator<
       : Object.values(presenceSnapshot?.peers ?? {}).filter(
           (p) => p[inputName] === true,
         );
-  }, [opts?.writeOnly, onservedPresence]);
-
-  const setActive = (isActive: boolean) => {
-    room._core._reactor.publishPresence(room.type, room.id, {
-      [inputName]: isActive,
-    } as unknown as Partial<RoomSchema[RoomType]>);
+  }, [opts?.writeOnly, observedPresence]);
 
-    if (!isActive) return;
+  const setActive = useCallback(
+    (isActive: boolean) => {
+      room._core._reactor.publishPresence(room.type, room.id, {
+        [inputName]: isActive,
+      } as unknown as Partial<RoomSchema[RoomType]>);
 
-    if (opts?.timeout === null || opts?.timeout === 0) return;
+      if (!isActive) return;
 
-    timeout.set(opts?.timeout ?? defaultActivityStopTimeout, () => {
-      room._core._reactor.publishPresence(room.type, room.id, {
-        [inputName]: null,
-      } as Partial<RoomSchema[RoomType]>);
-    });
-  };
+      if (opts?.timeout === null || opts?.timeout === 0) return;
 
-  return {
-    active,
-    setActive: (a: boolean) => {
-      setActive(a);
+      timeout.set(opts?.timeout ?? defaultActivityStopTimeout, () => {
+        room._core._reactor.publishPresence(room.type, room.id, {
+          [inputName]: null,
+        } as Partial<RoomSchema[RoomType]>);
+      });
     },
-    inputProps: {
-      onKeyDown: (e: KeyboardEvent) => {
-        const isEnter = opts?.stopOnEnter && e.key === "Enter";
-        const isActive = !isEnter;
+    [room.type, room.id, inputName, opts?.timeout, timeout],
+  );
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      const isEnter = opts?.stopOnEnter && e.key === "Enter";
+      const isActive = !isEnter;
 
-        setActive(isActive);
-      },
-      onBlur: () => {
-        setActive(false);
-      },
+      setActive(isActive);
     },
+    [opts.stopOnEnter, setActive],
+  );
+  const onBlur = useCallback(() => {
+    setActive(false);
+  }, [setActive]);
+
+  const inputProps = useMemo(() => {
+    return { onKeyDown, onBlur };
+  }, [onKeyDown, onBlur]);
+
+  return {
+    active,
+    setActive,
+    inputProps,
   };
 }