Merge pull request cerebral#224 from FWeinb/react-refactor-ref

refactor(overmind-react): use useRef for storing componentId and tracking tree

Author: christianalfoni

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

@@ -11,6 +11,7 @@ import {
   useEffect,
   // @ts-ignore
   useState,
+  useRef,
   useLayoutEffect,
   createContext,
   useContext,
@@ -68,6 +69,13 @@ export const createHook = <Config extends Configuration>(
       ? ReactCurrentOwner.current.elementType
       : {}
   }
+  const useForceRerender = (): VoidFunction => {
+    const [, setState] = useState(true)
+    const forceRerender: VoidFunction = (): void => {
+      setState((state) => !state)
+    }
+    return forceRerender
+  }
 
   return () => {
     const overmind = (overmindInstance || useContext(context)) as Overmind<
@@ -79,14 +87,14 @@ export const createHook = <Config extends Configuration>(
       typeof component.__componentId === 'undefined'
         ? nextComponentId++
         : component.__componentId
-    const [{ tree }, updateComponent] = useState<any>(() => ({
-      tree: (overmind as any).proxyStateTree.getTrackStateTree(),
-    }))
+
+    const rerenderComponent = useForceRerender()
+    const { current: tree } = useRef<any>(
+      (overmind as any).proxyStateTree.getTrackStateTree()
+    )
 
     if (IS_PRODUCTION) {
-      tree.track(() => {
-        updateComponent(({ tree }) => ({ tree }))
-      })
+      tree.track(rerenderComponent)
 
       useEffect(
         () => () => {
@@ -97,12 +105,12 @@ export const createHook = <Config extends Configuration>(
 
       useLayoutEffect(() => tree.stopTracking())
     } else {
-      const [componentInstanceId] = useState<any>(
-        () => currentComponentInstanceId++
+      const { current: componentInstanceId } = useRef<any>(
+        currentComponentInstanceId++
       )
 
       tree.track((_, paths, flushId) => {
-        updateComponent(({ tree }) => ({ tree }))
+        rerenderComponent()
         overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
           componentId: component.__componentId,
           componentInstanceId,