feat(overmind-react): support strict and concurrent mode, so far

Author: christianalfoni

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

@@ -1,5 +1,5 @@
 import 'proxy-state-tree'
-
+import { unstable_scheduleCallback, unstable_getCurrentPriorityLevel, unstable_cancelCallback } from 'scheduler'
 import {
   EventType,
   IConfiguration,
@@ -53,26 +53,20 @@ export const Provider: React.ProviderExoticComponent<
   React.ProviderProps<Overmind<IConfiguration> | OvermindMock<IConfiguration>>
 > = context.Provider
 
-const useForceRerender = () => {
-  const [flushId, setState] = react.useState(() => -1)
-  // We use memo here, instead of ref, to support fast-refresh
-  const mountedRef = react.useMemo(() => ({ current: true}), [])
+function useForceRerender() {
+  const [{ flushId }, setTick] = react.useState({ tick: 0, flushId: 0})
 
-  react.useEffect(
-    () => () => {
-      mountedRef.current = false
-    },
-    []
-  )
+  const forceRerender = react.useCallback((flushId?) => {
+      setTick(current => ({
+        ...current,
+        tick: current.tick + 1,
+        flushId: flushId || current.flushId
+      }))
+  }, [])
 
-  const forceRerender = (_, __, flushId): void => {
-    if (mountedRef.current) {
-      setState(flushId)
-    }
-  }
   return {
-    forceRerender,
-    flushId,
+    flushId, 
+    forceRerender
   }
 }
 
@@ -99,23 +93,31 @@ const useState =  <Config extends IConfiguration>(): Overmind<Config>['state'] =
     return overmind.state
   }
 
-  const tree = react.useMemo<any>(() =>
-    (overmind as any).proxyStateTree.getTrackStateTree(), []
-  )
+  const trackingRef = react.useRef<any>(null)
 
-  if (IS_PRODUCTION) {
-    const { forceRerender } = useForceRerender()
+  const {flushId, forceRerender} = useForceRerender()
+
+  if (!trackingRef.current) {
+    trackingRef.current = {
+      tree: (overmind as any).proxyStateTree.getTrackStateTree(),
+      hasUpdatedBeforeCommit: false,
+      stopTrackingTask: unstable_scheduleCallback(unstable_getCurrentPriorityLevel(), () => {
+        trackingRef.current.tree.stopTracking()
+      })
+    }
+  }
 
+  if (IS_PRODUCTION) {
     react.useEffect(
       () => () => {
-        ;(overmind as any).proxyStateTree.disposeTree(tree)
+        ;(overmind as any).proxyStateTree.disposeTree(trackingRef.current.tree)
       },
       []
     )
 
-    react.useLayoutEffect(() => tree.stopTracking())
+    react.useLayoutEffect(() => trackingRef.current.tree.stopTracking())
 
-    tree.track(forceRerender)
+    trackingRef.current.tree.track(forceRerender)
   } else {
     const component = useCurrentComponent()
     const name = component.name
@@ -128,18 +130,21 @@ const useState =  <Config extends IConfiguration>(): Overmind<Config>['state'] =
       currentComponentInstanceId++
     )
 
-    const { flushId, forceRerender } = useForceRerender()
-
     react.useLayoutEffect(() => {
+      trackingRef.current.mounted = true
       overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
         componentId: component.__componentId,
         componentInstanceId,
         name,
-        paths: Array.from(tree.pathDependencies) as any,
+        paths: Array.from(trackingRef.current.tree.pathDependencies) as any,
       })
 
+      if (trackingRef.current.hasUpdatedBeforeCommit) {
+        forceRerender()
+      }
+
       return () => {
-        ;(overmind as any).proxyStateTree.disposeTree(tree)
+        ;(overmind as any).proxyStateTree.disposeTree(trackingRef.current.tree)
         overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
           componentId: component.__componentId,
           componentInstanceId,
@@ -149,19 +154,30 @@ const useState =  <Config extends IConfiguration>(): Overmind<Config>['state'] =
     }, [])
 
     react.useLayoutEffect(() => {
-      tree.stopTracking()
+      if (trackingRef.current.stopTrackingTask) {
+        unstable_cancelCallback(trackingRef.current.stopTrackingTask)
+        trackingRef.current.stopTrackingTask = null
+      }
+      trackingRef.current.tree.stopTracking()
       overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
         componentId: component.__componentId,
         componentInstanceId,
         name,
         flushId,
-        paths: Array.from(tree.pathDependencies) as any,
+        paths: Array.from(trackingRef.current.tree.pathDependencies) as any,
       })
     })
-    tree.track(forceRerender)
+    trackingRef.current.tree.track(() => {
+      if (trackingRef.current.mounted) {
+        forceRerender()
+      } else {
+        trackingRef.current.hasUpdatedBeforeCommit = true
+      }
+    })
   }
+  
 
-  return tree.state
+  return trackingRef.current.tree.state
 }
 
 const useActions =  <Config extends IConfiguration>(): Overmind<Config>['actions'] => {