Merge pull request #168 from takker99:use-effect

refactor: Reduce the number of useEffect() as less as possible

Author: takker99

useBubbleData.ts

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useState } from "./deps/preact.tsx";
+import { useEffect, useState } from "./deps/preact.tsx";
 import { load, subscribe, unsubscribe } from "./bubble.ts";
 import { createDebug } from "./debug.ts";
 import { ID } from "./id.ts";
@@ -8,35 +8,19 @@ const logger = createDebug("ScrapBubble:useBubbleData.ts");
 
 /** bubbleデータを取得するhooks
  *
- * @param title 取得したいbubbleのタイトル
- * @param projects 取得先projectのリスト
- * @return bubble
+ * @param pageIds 取得するページのID
+ * @returns bubble data
  */
 export const useBubbleData = (
   pageIds: readonly ID[],
 ): readonly Bubble[] => {
-  const [bubbles, setBubbles] = useState<readonly Bubble[]>([]);
-
-  useLayoutEffect(() => {
-    const update = () => {
-      setBubbles(() => {
-        const bubbles = [...load(pageIds)].flatMap((bubble) =>
-          bubble ? [bubble] : []
-        );
-
-        // debug用
-        logger.debug(
-          `Required: ${pageIds.length} pages, ${bubbles.length} found`,
-          bubbles,
-        );
-        return bubbles;
-      });
-    };
-
-    // データの初期化
-    update();
+  const [bubbles, setBubbles] = useState<readonly Bubble[]>(
+    makeBubbles(pageIds),
+  );
 
-    // データ更新用listenerの登録
+  // データ更新用listenerの登録
+  useEffect(() => {
+    setBubbles(makeBubbles(pageIds));
 
     let timer: number | undefined;
     /** ページデータを更新する */
@@ -45,7 +29,7 @@ export const useBubbleData = (
       clearTimeout(timer);
       timer = setTimeout(() => {
         logger.debug(`Update ${pageIds.length} pages`);
-        update();
+        setBubbles(makeBubbles(pageIds));
       }, 10);
     };
 
@@ -58,3 +42,16 @@ export const useBubbleData = (
 
   return bubbles;
 };
+
+const makeBubbles = (pageIds: readonly ID[]): readonly Bubble[] => {
+  const bubbles = [...load(pageIds)].flatMap((bubble) =>
+    bubble ? [bubble] : []
+  );
+
+  // debug用
+  logger.debug(
+    `Required: ${pageIds.length} pages, ${bubbles.length} found`,
+    bubbles,
+  );
+  return bubbles;
+};

useBubbles.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "./deps/preact.tsx";
+import { useCallback, useState } from "./deps/preact.tsx";
 import { Position } from "./position.ts";
 import { LinkType } from "./types.ts";
 import { Scrapbox } from "./deps/scrapbox.ts";
@@ -54,19 +54,6 @@ export const useBubbles = (): [
   BubbleOperators,
   ...BubbleSource[],
 ] => {
-  const [sources, setSources] = useState<Source[]>([]);
-
-  const change = useCallback(
-    (
-      depth: number,
-      source?: Source,
-    ) =>
-      setSources((old) =>
-        source ? [...old.slice(0, depth), source] : [...old.slice(0, depth)]
-      ),
-    [],
-  );
-
   const [bubbles, setBubbles] = useState<[
     BubbleOperators,
     ...BubbleSource[],
@@ -75,26 +62,37 @@ export const useBubbles = (): [
     hide: () => change(0),
   }]);
 
-  // 操作函数や他のbubbleデータから計算される値を追加する
-  useEffect(() => {
-    // 更新されたbubble以外は、objectの参照を壊さずにそのまま返す
-    setBubbles((
-      [first, ...prev],
-    ) => [
-      first,
-      ...sources.map((source, i) =>
-        source === prev.at(i)?.source ? prev.at(i)! : ({
-          source,
-          parentTitles: [
-            scrapbox.Page.title ?? "",
-            ...sources.slice(0, i).map((source) => source.title),
-          ],
-          bubble: (source: Source) => change(i + 1, source),
-          hide: () => change(i + 1),
-        })
-      ),
-    ]);
-  }, [sources]);
+  const change = useCallback(
+    (
+      depth: number,
+      source?: Source,
+    ) => {
+      // 操作函数や他のbubbleデータから計算される値を追加する
+      // 更新されたbubble以外は、objectの参照を壊さずにそのまま返す
+      setBubbles((
+        [first, ...prev],
+      ) => [
+        first,
+        ...(
+          source
+            ? [
+              ...prev.slice(0, depth),
+              source === prev.at(depth)?.source ? prev.at(depth)! : ({
+                source,
+                parentTitles: [
+                  scrapbox.Page.title ?? "",
+                  ...prev.slice(0, depth).map((bubble) => bubble.source.title),
+                ],
+                bubble: (source: Source) => change(depth + 1, source),
+                hide: () => change(depth + 1),
+              }),
+            ]
+            : [...prev.slice(0, depth)]
+        ),
+      ]);
+    },
+    [],
+  );
 
   return bubbles;
 };