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;