fix

chrome/src/components/HookView.tsx

@@ -62,7 +62,7 @@ export const ValueViewTree = ({ name, item, prefix }: { name: string; item: HOOK
 
   const t = chunkData?.t ?? item?.t;
 
-  const isCircular = chunkData?.c ?? item?.c;
+  const isCache = chunkData?.c ?? item?.c;
 
   const text = useMemo(() => {
     if (n) {
@@ -119,7 +119,7 @@ export const ValueViewTree = ({ name, item, prefix }: { name: string; item: HOOK
               {name}: <span className="hook-value-placeholder">{data ? text : <DotsHorizontalIcon className="inline-block" />}</span>
             </div>
           </div>
-          {(isCircular ? expand : true) && (
+          {(isCache ? expand : true) && (
             <div className={`${expand ? "block" : "hidden"} ml-6 my-0.5`}>
               {data ? (
                 Array.isArray(data) ? (

chrome/src/hooks/useDetailNode.ts

@@ -14,6 +14,10 @@ export const useDetailNode = createState(() => ({ nodes: [], loading: false, err
       s.nodes = list;
     },
 
+    delNode: (id: string) => {
+      s.nodes = s.nodes.filter((i) => i.i !== id);
+    },
+
     setLoading: (loading: boolean) => {
       s.loading = loading;
     },

chrome/src/hooks/useTreeNode.ts

@@ -5,6 +5,12 @@ import { isServer } from "@/utils/isServer";
 import { flattenNode } from "@/utils/node";
 
 import { useAppTree } from "./useAppTree";
+import { useChunk } from "./useChunk";
+import { useDetailNode } from "./useDetailNode";
+
+const clearChunk = useChunk.getActions().clear;
+
+const delNode = useDetailNode.getActions().delNode;
 
 export const useTreeNode = createState(
   () =>
@@ -40,7 +46,13 @@ export const useTreeNode = createState(
           }
         },
         forceReload: () => {
-          if (s.select) s.force++;
+          if (s.select) {
+            s.force++;
+
+            delNode(s.select);
+          }
+
+          clearChunk();
         },
         updateSelectList,
         setHover: (node: string | null) => {

packages/core/src/data.ts

@@ -31,7 +31,7 @@ export type NodeValue = {
   e: boolean;
   // loaded
   l?: boolean;
-  // circular
+  // cache
   c?: boolean;
   // name
   n?: string;
@@ -47,6 +47,8 @@ let loadById = false;
 
 const valueMap = new Map<number, any>();
 
+const idMap = new Map<any, number>();
+
 let cacheMap = new WeakMap<any, NodeValue>();
 
 const getType = (value: any): NodeValue["t"] => {
@@ -85,8 +87,14 @@ const isObject = (value: NodeValue["t"]) => {
 const getTargetNode = (value: any, type: NodeValue["t"], deep = 3): NodeValue => {
   // full deep to load
   if (deep === 0) {
-    const currentId = id++;
+    const existId = idMap.get(value);
+
+    const currentId = existId || id++;
+
     valueMap.set(currentId, value);
+
+    idMap.set(value, currentId);
+
     return {
       i: currentId,
       t: type,
@@ -148,18 +156,13 @@ const getTargetNode = (value: any, type: NodeValue["t"], deep = 3): NodeValue =>
 };
 
 const getNodeWithCache = (value: any, type: NodeValue["t"], deep = 3): NodeValue => {
-  const cache = cacheMap.get(value);
-
-  if (cache) {
-    // check circular reference
-    if (loadById) {
+  if (loadById) {
+    const cache = cacheMap.get(value);
+    if (cache) {
       return {
-        t: type,
-        n: `${cache.n || cache.t} (Circular Reference)`,
+        ...cache,
         c: true,
-        v: cache.v,
-        e: true,
-      };
+      }
     }
   }