fix(overmind-react): fix double render with hook

Author: christianalfoni

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

@@ -11,6 +11,7 @@ import {
   useEffect,
   // @ts-ignore
   useState,
+  useLayoutEffect,
 } from 'react'
 
 export type IReactComponent<P = any> =
@@ -52,11 +53,13 @@ export const createHook = <A extends Overmind<Configuration>>(overmind: A) => {
       typeof component.__componentId === 'undefined'
         ? nextComponentId++
         : component.__componentId
-    const [overmindState, setOvermindState] = useState<any>(null)
+    const [overmindState, setOvermindState] = useState<any>({})
+
     const trackId = overmind.trackState()
-    useEffect(() => {
+    useLayoutEffect(() => {
       const paths = overmind.clearTrackState(trackId)
-      if (overmindState) {
+
+      if (overmindState.listener) {
         overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
           componentId: component.__componentId,
           componentInstanceId: overmindState.componentInstanceId,
@@ -65,45 +68,39 @@ export const createHook = <A extends Overmind<Configuration>>(overmind: A) => {
         })
         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)
-          }),
+        overmindState.componentInstanceId = componentInstanceId++
+        overmindState.listener = overmind.addFlushListener(paths, (flushId) => {
+          overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
+            componentId: component.__componentId,
+            componentInstanceId: overmindState.componentInstanceId,
+            name,
+            flushId,
+            paths: Array.from(paths),
+          })
+          setOvermindState((state) => state)
         })
         overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
           componentId: component.__componentId,
-          componentInstanceId: thisComponentInstanceId,
+          componentInstanceId: overmindState.componentInstanceId,
           name,
           paths: Array.from(paths),
         })
       }
     })
-    useEffect(
-      () => {
-        return () => {
-          if (!overmindState) {
-            return
-          }
-
-          overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
-            componentId: component.__componentId,
-            componentInstanceId: overmindState.componentInstanceId,
-            name,
-          })
-          overmindState.listener.dispose()
+    useEffect(() => {
+      return () => {
+        if (!overmindState.listener) {
+          return
         }
-      },
-      [overmindState]
-    )
+
+        overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
+          componentId: component.__componentId,
+          componentInstanceId: overmindState.componentInstanceId,
+          name,
+        })
+        overmindState.listener.dispose()
+      }
+    }, [])
     return overmind
   }
 }