fix(overmind-react): fix initialise and closure bugs

Author: garth

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

@@ -50,56 +50,54 @@ 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 [overmindState, setOvermindState] = useState(() => {
+      const paths = overmind.clearTrackState(trackId)
+      componentInstanceId++
+      overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
+        componentId: component.__componentId,
+        componentInstanceId,
+        name,
+        paths: Array.from(paths),
+      })
+      return {
+        componentInstanceId,
+        listener: overmind.addFlushListener(paths, (flushId) => {
+          overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
+            componentId: component.__componentId,
+            componentInstanceId,
+            name,
+            flushId,
+            paths: Array.from(paths),
+          })
+          setOvermindState((state) => state)
+        }),
+      }
+    })
+
     useEffect(() => {
       const paths = overmind.clearTrackState(trackId)
-      if (overmindState) {
+      if (paths) {
         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, {
+      }
+    })
+    useEffect(() => {
+      return () => {
+        overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
           componentId: component.__componentId,
-          componentInstanceId: thisComponentInstanceId,
+          componentInstanceId: overmindState.componentInstanceId,
           name,
-          paths: Array.from(paths),
         })
+        overmindState.listener.dispose()
       }
-    })
-    useEffect(
-      () => {
-        return () => {
-          if (overmindState) {
-            overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
-              componentId: component.__componentId,
-              componentInstanceId: overmindState.componentInstanceId,
-              name,
-            })
-            overmindState.listener.dispose()
-          }
-        }
-      },
-      [component.__componentId]
-    )
+    }, [])
+
     return overmind
   }
 }