fix(BlockList): render items to wrapper instead to portal direcly to improve reconcilation

fix(useGraphEvent): use useEffect to listen graph-event
fix(useSignal): useLayoutEffect to faster get signal-value

Author: draedful

src/react-components/BlocksList.tsx

@@ -119,14 +119,14 @@ export const BlocksList = memo(function BlocksList({ renderBlock, graphObject }:
   }, [graphObject, scheduleListUpdate]);
 
   return (
-    <>
+    <div>
       {graphState === GraphState.READY &&
         cameraScaleLevel === ECameraScaleLevel.Detailed &&
         blockStates.map((blockState) => {
           return (
             <Block key={blockState.id} renderBlock={renderBlock} graphObject={graphObject} blockState={blockState} />
           );
         })}
-    </>
+    </div>
   );
 });

src/react-components/hooks/useGraphEvents.ts

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useMemo, useRef } from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
 
 import { Graph } from "../../graph";
 import { GraphEventsDefinitions, UnwrapGraphEvents, UnwrapGraphEventsDetail } from "../../graphEvents";
@@ -48,10 +48,11 @@ export function useGraphEvent<Event extends keyof GraphEventsDefinitions>(
     lastEventRef.current = e;
     fn();
   });
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (!graph) return undefined;
     return graph.on(event, onEvent);
   }, [graph, event, onEvent]);
+
   useLayoutEffect(() => {
     return () => {
       fn.cancel?.();
@@ -60,7 +61,7 @@ export function useGraphEvent<Event extends keyof GraphEventsDefinitions>(
 }
 
 export function useGraphEvents(graph: Graph | null, events: Partial<TGraphEventCallbacks>): void {
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (!graph) return undefined;
 
     const unsubscribe = [];

src/react-components/hooks/useSignal.ts

@@ -1,10 +1,10 @@
-import { useEffect, useState } from "react";
+import { useLayoutEffect, useState } from "react";
 
 import type { Signal } from "@preact/signals-core";
 
 export function useSignal<T>(signal: Signal<T>) {
   const [state, setState] = useState(signal.value);
-  useEffect(() => {
+  useLayoutEffect(() => {
     return signal.subscribe(setState);
   }, [signal]);
   return state;