fix(overmind-react): improve passing updates to devtools using hooks

Author: christianalfoni

packages/node_modules/overmind-react/src/index.ts

@@ -95,48 +95,37 @@ export const createHook = <Config extends Configuration>(
         []
       )
     } else {
-      const [debugging] = useState<any>(() => ({
-        isFirstRender: true,
-        currentFlushId: 0,
-        componentInstanceId: currentComponentInstanceId++,
-      }))
+      const [componentInstanceId] = useState<any>(
+        () => currentComponentInstanceId++
+      )
 
-      tree.track((mutations, paths, flushId) => {
-        debugging.currentFlushId = flushId
+      tree.track((_, paths, flushId) => {
         updateComponent((state) => state)
+        overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
+          componentId: component.__componentId,
+          componentInstanceId,
+          name,
+          flushId,
+          paths,
+        })
       })
 
-      useLayoutEffect(() => {
-        if (debugging.isFirstRender) {
-          overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
-            componentId: component.__componentId,
-            componentInstanceId: debugging.componentInstanceId,
-            name,
-            paths: Array.from(tree.pathDependencies) as any,
-          })
-          debugging.isFirstRender = false
-        } else {
-          overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
-            componentId: component.__componentId,
-            componentInstanceId: debugging.componentInstanceId,
-            name,
-            flushId: debugging.currentFlushId,
-            paths: Array.from(tree.pathDependencies as Set<string>),
-          })
-        }
-      })
-
-      useEffect(
-        () => () => {
+      useEffect(() => {
+        overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
+          componentId: component.__componentId,
+          componentInstanceId,
+          name,
+          paths: Array.from(tree.pathDependencies) as any,
+        })
+        return () => {
           ;(overmind as any).proxyStateTree.disposeTree(tree)
           overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
             componentId: component.__componentId,
-            componentInstanceId: debugging.componentInstanceId,
+            componentInstanceId,
             name,
           })
-        },
-        []
-      )
+        }
+      }, [])
     }
 
     return {