fix(overmind-react): fix issues with hook

Author: christianalfoni

packages/node_modules/overmind-react/package.json

@@ -43,7 +43,7 @@
   },
   "devDependencies": {
     "@types/jest": "^23.1.4",
-    "@types/react": "^16.4.6",
+    "@types/react": "^16.7.13",
     "jest": "^23.5.0",
     "react": "^16.7.0-alpha.1",
     "react-test-renderer": "^16.4.1",

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

@@ -50,47 +50,58 @@ export const createHook = <A extends Overmind<Configuration>>(overmind: A) => {
       typeof component.__componentId === 'undefined'
         ? nextComponentId++
         : component.__componentId
-    const [thisComponentInstanceId] = useState(() => componentInstanceId++)
-    const [_, forceUpdate] = useState(null)
-
+    const [overmindState, setOvermindState] = useState<any>(null)
+    const trackId = overmind.trackState()
     useEffect(() => {
-      overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
-        componentId: component.__componentId,
-        componentInstanceId: thisComponentInstanceId,
-        name,
-        paths: [],
-      })
-      return () => {
-        overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
+      const paths = overmind.clearTrackState(trackId)
+      if (overmindState) {
+        overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
+          componentId: component.__componentId,
+          componentInstanceId: overmindState.componentInstanceId,
+          name,
+          paths: Array.from(paths),
+        })
+        overmindState.listener.update(paths)
+      } else {
+        const thisComponentInstanceId = componentInstanceId++
+        setOvermindState({
+          componentInstanceId: thisComponentInstanceId,
+          listener: overmind.addFlushListener(paths, (flushId) => {
+            overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
+              componentId: component.__componentId,
+              componentInstanceId: thisComponentInstanceId,
+              name,
+              flushId,
+              paths: Array.from(paths),
+            })
+            setOvermindState((state) => state)
+          }),
+        })
+        overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
           componentId: component.__componentId,
           componentInstanceId: thisComponentInstanceId,
           name,
+          paths: Array.from(paths),
         })
       }
-    }, [])
-
-    const trackId = overmind.trackState()
-
-    useEffect(() => {
-      const paths = overmind.clearTrackState(trackId)
+    })
+    useEffect(
+      () => {
+        return () => {
+          if (!overmindState) {
+            return
+          }
 
-      if (paths && paths.size) {
-        const listener = overmind.addFlushListener(paths, (flushId) => {
-          forceUpdate(flushId)
-          overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
+          overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
             componentId: component.__componentId,
-            componentInstanceId: thisComponentInstanceId,
+            componentInstanceId: overmindState.componentInstanceId,
             name,
-            flushId,
-            paths: Array.from(paths),
           })
-        })
-        return () => {
-          listener.dispose()
+          overmindState.listener.dispose()
         }
-      }
-    })
-
+      },
+      [overmindState]
+    )
     return overmind
   }
 }