refactor(view): extract canvas viewport hooks

view/canvas/useCanvasRenderer.ts

@@ -0,0 +1,22 @@
+import { useEffect, type RefObject } from "react";
+import type { AppStore } from "@editor/store";
+import { createRenderer } from "@renderer/index";
+
+export function useCanvasRenderer(canvasRef: RefObject<HTMLCanvasElement | null>, store: AppStore) {
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const renderer = createRenderer(canvas);
+    renderer.render(store.getState());
+
+    const unsubscribe = store.subscribe((state) => {
+      renderer.render(state);
+    });
+
+    return () => {
+      unsubscribe();
+      renderer.dispose();
+    };
+  }, [canvasRef, store]);
+}