fix(overmind-react): improve createHook with idomatic usage of useEffect

Author: garth

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

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