From 8930c0f6022a9a058d6c194d907e9e469e20c43a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Silvani?= <munshkr@gmail.com>
Date: Wed, 3 Apr 2024 19:35:04 -0300
Subject: [PATCH] refactor: Use `useCallback` hook when using `useEvalHandler`

---
 packages/web/src/hooks/use-eval-handler.tsx    |  9 +++------
 packages/web/src/routes/frames/hydra.tsx       | 14 ++++++++------
 packages/web/src/routes/frames/mercury-web.tsx | 14 ++++++++------
 packages/web/src/routes/frames/strudel.tsx     | 14 ++++++++------
 4 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/packages/web/src/hooks/use-eval-handler.tsx b/packages/web/src/hooks/use-eval-handler.tsx
index ad27b6a4..036fa35e 100644
--- 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
index 52b7694f..5f29dacf 100644
--- 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
index 7b5f4734..b2371332 100644
--- 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
index 19ed3a2c..434bdb10 100644
--- 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;