Merge pull request cerebral#166 from garth/fix-create-hook-unmount

fix(overmind-react): refactor createHook with component lifecycle fixes

Author: christianalfoni

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

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