refactor: Use useCallback hook when using useEvalHandler

munshkr · Apr 3, 2024 · 1e05bae · 1e05bae
1 parent 4d77f1c
commit 1e05bae
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 24 deletions.
diff --git a/packages/web/src/hooks/use-eval-handler.tsx b/packages/web/src/hooks/use-eval-handler.tsx
@@ -1,15 +1,12 @@
 import { EvalMessage } from "@flok-editor/session";
 import { useEffect } from "react";
 
-export function useEvalHandler(
-  cb: (evalMessage: EvalMessage) => void,
-  deps: any[]
-) {
+export function useEvalHandler(callback: (message: EvalMessage) => void) {
   useEffect(() => {
     const handleEval = (event: MessageEvent) => {
       if (event.data.type === "eval") {
         const msg = event.data.body as EvalMessage;
-        cb && cb(msg);
+        callback(msg);
       }
     };
 
@@ -18,7 +15,7 @@ export function useEvalHandler(
     return () => {
       window.removeEventListener("message", handleEval);
     };
-  }, deps);
+  }, [callback]);
 
   return;
 }
diff --git a/packages/web/src/routes/frames/hydra.tsx b/packages/web/src/routes/frames/hydra.tsx
@@ -3,7 +3,7 @@ import { useEvalHandler } from "@/hooks/use-eval-handler";
 import { HydraWrapper } from "@/lib/hydra-wrapper";
 import { sendToast } from "@/lib/utils";
 import { isWebglSupported } from "@/lib/webgl-detector";
-import { useMemo, useRef, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 export function Component() {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
@@ -41,11 +41,13 @@ export function Component() {
   }, []);
 
   useEvalHandler(
-    (msg) => {
-      if (!instance) return;
-      instance.tryEval(msg.body);
-    },
-    [instance]
+    useCallback(
+      (msg) => {
+        if (!instance) return;
+        instance.tryEval(msg.body);
+      },
+      [instance]
+    )
   );
 
   return hasWebGl && canvasRef && <HydraCanvas ref={canvasRef} fullscreen />;

diff --git a/packages/web/src/routes/frames/mercury-web.tsx b/packages/web/src/routes/frames/mercury-web.tsx
@@ -2,7 +2,7 @@ import { useEvalHandler } from "@/hooks/use-eval-handler";
 import { MercuryWrapper } from "@/lib/mercury-wrapper";
 import { sendToast } from "@/lib/utils";
 import { type EvalMessage } from "@flok-editor/session";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 export function Component() {
   const [instance, setInstance] = useState<any>(null);
@@ -23,11 +23,13 @@ export function Component() {
   }, []);
 
   useEvalHandler(
-    (msg: EvalMessage) => {
-      if (!instance) return;
-      instance.tryEval(msg.body);
-    },
-    [instance]
+    useCallback(
+      (msg: EvalMessage) => {
+        if (!instance) return;
+        instance.tryEval(msg.body);
+      },
+      [instance]
+    )
   );
 
   return null;

diff --git a/packages/web/src/routes/frames/strudel.tsx b/packages/web/src/routes/frames/strudel.tsx
@@ -2,7 +2,7 @@ import { useEvalHandler } from "@/hooks/use-eval-handler";
 import { StrudelWrapper } from "@/lib/strudel-wrapper";
 import { sendToast } from "@/lib/utils";
 import { type EvalMessage } from "@flok-editor/session";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 export function Component() {
   const [instance, setInstance] = useState<any>(null);
@@ -24,11 +24,13 @@ export function Component() {
   }, []);
 
   useEvalHandler(
-    (msg: EvalMessage) => {
-      if (!instance) return;
-      instance.tryEval(msg);
-    },
-    [instance]
+    useCallback(
+      (msg: EvalMessage) => {
+        if (!instance) return;
+        instance.tryEval(msg);
+      },
+      [instance]
+    )
   );
 
   return null;