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(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 && ; 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(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(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;