Batching support (#122)

* Very naive batching implementation

Co-authored-by: Omar <[email protected]>

* Batches effects of other batches

Co-authored-by: Omar <[email protected]>

* Extract batch to a separated module and make it apply to Facet by default

* WIP: logging extra usage

* Remove log and schedule on effects

* Logs scheduler success ration

* Rename batch into scheduler

* Documentation

* Only starts a batch on createFacet if we are notifying a change

* Also test useFacetEffect

* Keep batch started until the end

Making sure to exhaust all tasks before exiting

* Fix linter

* Expose batch as a public API

* Small refactor

* Make sure to cancel tasks that are no longer needed

Needs unit tests

* Testing order of execution of scheduled tasks within batches

* Fix cancelation of tasks

Still needs unit tests (as previous implementation proved to not be sufficient)

* Rename canceled to scheduled

* Uses an array to keep track of tasks

* Using a "regular for" should be faster

More info: https://esbench.com/bench/6317fc2a6c89f600a5701bc9

* Unit test canceling tasks

* Cleanup development log, plus some extra docs

* Avoids scheduling for first event within a batch

Also properly handles exceptions within a batch.

---------

Co-authored-by: Omar <[email protected]>

Author: pirelenito

packages/@react-facet/core/src/facet/createFacet.ts

@@ -1,5 +1,6 @@
 import { defaultEqualityCheck } from '../equalityChecks'
 import { Cleanup, EqualityCheck, Listener, WritableFacet, StartSubscription, Option, NO_VALUE } from '../types'
+import { batch } from '../scheduler'
 
 export interface FacetOptions<V> {
   initialValue: Option<V>
@@ -42,11 +43,13 @@ export function createFacet<V>({
       }
     }
 
-    currentValue = newValue
+    batch(() => {
+      currentValue = newValue
 
-    for (const listener of listeners) {
-      listener(currentValue)
-    }
+      for (const listener of listeners) {
+        listener(currentValue)
+      }
+    })
   }
 
   /**

packages/@react-facet/core/src/hooks/useFacetEffect.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useLayoutEffect } from 'react'
 import { Facet, Unsubscribe, Cleanup, NO_VALUE, ExtractFacetValues } from '../types'
+import { cancelScheduledTask, scheduleTask } from '../scheduler'
 
 export const createUseFacetEffect = (useHook: typeof useEffect | typeof useLayoutEffect) => {
   return function <Y extends Facet<unknown>[], T extends [...Y]>(
@@ -34,22 +35,31 @@ export const createUseFacetEffect = (useHook: typeof useEffect | typeof useLayou
       const unsubscribes: Unsubscribe[] = []
       const values: unknown[] = facets.map(() => NO_VALUE)
 
+      const task = () => {
+        hasAllDependencies = hasAllDependencies || values.every((value) => value != NO_VALUE)
+
+        if (hasAllDependencies) {
+          if (cleanup != null) {
+            cleanup()
+          }
+
+          cleanup = effectMemoized(...(values as ExtractFacetValues<T>))
+        }
+      }
+
       facets.forEach((facet, index) => {
         unsubscribes[index] = facet.observe((value) => {
           values[index] = value
-          hasAllDependencies = hasAllDependencies || values.every((value) => value != NO_VALUE)
-
           if (hasAllDependencies) {
-            if (cleanup != null) {
-              cleanup()
-            }
-
-            cleanup = effectMemoized(...(values as ExtractFacetValues<T>))
+            scheduleTask(task)
+          } else {
+            task()
           }
         })
       })
 
       return () => {
+        cancelScheduledTask(task)
         unsubscribes.forEach((unsubscribe) => unsubscribe())
         if (cleanup != null) {
           cleanup()

packages/@react-facet/core/src/index.ts

@@ -7,3 +7,4 @@ export * from './helpers'
 export * from './hooks'
 export * from './mapFacets'
 export * from './types'
+export { batch } from './scheduler'

packages/@react-facet/core/src/mapFacets/mapIntoObserveArray.ts

@@ -1,3 +1,4 @@
+import { cancelScheduledTask, scheduleTask } from '../scheduler'
 import { defaultEqualityCheck } from '../equalityChecks'
 import { EqualityCheck, Listener, Option, NO_VALUE, Observe, Facet, NoValue } from '../types'
 
@@ -14,31 +15,22 @@ export function mapIntoObserveArray<M>(
     const dependencyValues: Option<unknown>[] = facets.map(() => NO_VALUE)
     let hasAllDependencies = false
 
-    const subscriptions = facets.map((facet, index) => {
-      // Most common scenario is not having any equality check
-      if (equalityCheck == null) {
-        return facet.observe((value) => {
-          dependencyValues[index] = value
-
-          hasAllDependencies = hasAllDependencies || dependencyValues.every((value) => value != NO_VALUE)
+    const task =
+      checker == null
+        ? () => {
+            hasAllDependencies = hasAllDependencies || dependencyValues.every((value) => value != NO_VALUE)
+            if (!hasAllDependencies) return
 
-          if (hasAllDependencies) {
             const result = fn(...dependencyValues)
             if (result === NO_VALUE) return
 
             listener(result)
           }
-        })
-      }
-
-      // Then we optimize for the second most common scenario of using the defaultEqualityCheck (by inline its implementation)
-      if (equalityCheck === defaultEqualityCheck) {
-        return facet.observe((value) => {
-          dependencyValues[index] = value
-
-          hasAllDependencies = hasAllDependencies || dependencyValues.every((value) => value != NO_VALUE)
+        : equalityCheck === defaultEqualityCheck
+        ? () => {
+            hasAllDependencies = hasAllDependencies || dependencyValues.every((value) => value != NO_VALUE)
+            if (!hasAllDependencies) return
 
-          if (hasAllDependencies) {
             const result = fn(...dependencyValues)
             if (result === NO_VALUE) return
 
@@ -59,29 +51,30 @@ export function mapIntoObserveArray<M>(
 
             listener(result)
           }
-        })
-      }
+        : () => {
+            hasAllDependencies = hasAllDependencies || dependencyValues.every((value) => value != NO_VALUE)
+            if (!hasAllDependencies) return
 
-      // Just a type-check guard, it will never happen
-      if (checker == null) return () => {}
+            const result = fn(...dependencyValues)
+            if (result === NO_VALUE) return
+            if (checker(result)) return
 
-      // Finally we use the custom equality check
+            listener(result)
+          }
+
+    const subscriptions = facets.map((facet, index) => {
       return facet.observe((value) => {
         dependencyValues[index] = value
-
-        hasAllDependencies = hasAllDependencies || dependencyValues.every((value) => value != NO_VALUE)
-
         if (hasAllDependencies) {
-          const result = fn(...dependencyValues)
-          if (result === NO_VALUE) return
-          if (checker(result)) return
-
-          listener(result)
+          scheduleTask(task)
+        } else {
+          task()
         }
       })
     })
 
     return () => {
+      cancelScheduledTask(task)
       subscriptions.forEach((unsubscribe) => unsubscribe())
     }
   }