useSyncExternalStore for useResultCallback

Author: tim-smart

src/hooks/useResult.ts

@@ -63,6 +63,5 @@ export const makeUseResult: <R>(
       }
     }, [runtime, stream])
 
-    trackRef.current.currentStatus = result._tag
     return resultBag
   }

src/hooks/useResultBag.ts

@@ -40,7 +40,7 @@ export interface TrackedProperties {
   failureCause: Cause.Cause<unknown>
 }
 
-const initial: TrackedProperties = {
+export const initialTrackedProps = (): TrackedProperties => ({
   dataUpdatedAt: Option.none(),
   errorUpdatedAt: Option.none(),
   currentErrorCount: 0,
@@ -51,7 +51,7 @@ const initial: TrackedProperties = {
   interruptCount: 0,
   currentStatus: "Initial",
   failureCause: Cause.empty
-}
+})
 
 const optionDateGreaterThan = pipe(
   N.Order,
@@ -62,8 +62,18 @@ const optionDateGreaterThan = pipe(
 
 export const updateNext = <E, A>(
   next: Result.Result<E, A>,
-  ref: MutableRefObject<TrackedProperties>
+  tracked: MutableRefObject<TrackedProperties>
 ): Result.Result<E, A> => {
+  updateTrackedProps(next, tracked.current)
+  return next
+}
+
+export const updateTrackedProps = <E, A>(
+  next: Result.Result<E, A>,
+  tracked: TrackedProperties
+) => {
+  tracked.currentStatus = next._tag
+
   switch (next._tag) {
     case "Initial": {
       break
@@ -73,73 +83,80 @@ export const updateNext = <E, A>(
     }
     case "Failure": {
       if (Cause.isFailure(next.cause)) {
-        ref.current.currentFailureCount++
-        ref.current.currentErrorCount++
-        ref.current.runningErrorCount++
-        ref.current.errorUpdatedAt = Option.some(new Date())
+        tracked.currentFailureCount++
+        tracked.currentErrorCount++
+        tracked.runningErrorCount++
+        tracked.errorUpdatedAt = Option.some(new Date())
         break
       }
       if (!Cause.isInterruptedOnly(next.cause)) {
-        ref.current.currentDefectCount++
-        ref.current.currentErrorCount++
-        ref.current.runningErrorCount++
+        tracked.currentDefectCount++
+        tracked.currentErrorCount++
+        tracked.runningErrorCount++
       }
 
       break
     }
     case "Success": {
-      ref.current.currentFailureCount = 0
-      ref.current.currentDefectCount = 0
-      ref.current.dataUpdatedAt = Option.some(new Date())
+      tracked.currentFailureCount = 0
+      tracked.currentDefectCount = 0
+      tracked.dataUpdatedAt = Option.some(new Date())
       break
     }
   }
-  return next
 }
 
+export const makeResultBag = <E, A>(result: Result.Result<E, A>, tracked: TrackedProperties): ResultBag<E, A> => ({
+  result,
+  get isLoading() {
+    return Result.isLoading(result)
+  },
+  get isError() {
+    return Result.isError(result)
+  },
+  get isSuccess() {
+    return Result.isSuccess(result)
+  },
+  get isLoadingFailure() {
+    return Result.isRetrying(result) && Option.isNone(tracked.dataUpdatedAt)
+  },
+  get isRefreshing() {
+    return Result.isRefreshing(result)
+  },
+  get isRetrying() {
+    return Result.isRetrying(result)
+  },
+  get isRefreshingFailure() {
+    return Result.isRetrying(result)
+      && optionDateGreaterThan(tracked.dataUpdatedAt, tracked.errorUpdatedAt)
+  },
+  get dataUpdatedAt() {
+    return tracked.dataUpdatedAt
+  },
+  get errorUpdatedAt() {
+    return tracked.errorUpdatedAt
+  },
+  get failureCount() {
+    return tracked.currentFailureCount
+  },
+  get failureCause() {
+    return tracked.failureCause as Cause.Cause<E>
+  },
+  get errorRunningCount() {
+    return tracked.runningErrorCount
+  }
+})
+
 export const useResultBag = <E, A>(result: Result.Result<E, A>) => {
-  const trackedPropsRef = useRef<TrackedProperties>(initial)
+  const trackedPropsRef = useRef<TrackedProperties>(null as any)
+  if (trackedPropsRef.current === null) {
+    trackedPropsRef.current = initialTrackedProps()
+  }
 
-  const resultBag = useMemo((): ResultBag<E, A> => ({
-    result,
-    get isLoading() {
-      return Result.isLoading(result)
-    },
-    get isError() {
-      return Result.isError(result)
-    },
-    get isSuccess() {
-      return Result.isSuccess(result)
-    },
-    get isLoadingFailure() {
-      return Result.isRetrying(result) && Option.isNone(trackedPropsRef.current.dataUpdatedAt)
-    },
-    get isRefreshing() {
-      return Result.isRefreshing(result)
-    },
-    get isRetrying() {
-      return Result.isRetrying(result)
-    },
-    get isRefreshingFailure() {
-      return Result.isRetrying(result)
-        && optionDateGreaterThan(trackedPropsRef.current.dataUpdatedAt, trackedPropsRef.current.errorUpdatedAt)
-    },
-    get dataUpdatedAt() {
-      return trackedPropsRef.current.dataUpdatedAt
-    },
-    get errorUpdatedAt() {
-      return trackedPropsRef.current.errorUpdatedAt
-    },
-    get failureCount() {
-      return trackedPropsRef.current.currentFailureCount
-    },
-    get failureCause() {
-      return trackedPropsRef.current.failureCause as Cause.Cause<E>
-    },
-    get errorRunningCount() {
-      return trackedPropsRef.current.runningErrorCount
-    }
-  }), [result])
+  const resultBag = useMemo(
+    (): ResultBag<E, A> => makeResultBag(result, trackedPropsRef.current),
+    [result]
+  )
 
   return [trackedPropsRef, resultBag] as const
 }

src/hooks/useResultCallback.ts

@@ -1,13 +1,99 @@
-import * as Option from "@effect/data/Option"
 import * as Effect from "@effect/io/Effect"
-import * as Fiber from "@effect/io/Fiber"
+import type * as Fiber from "@effect/io/Fiber"
+import * as Ref from "@effect/io/Ref"
 import * as Runtime from "@effect/io/Runtime"
 import * as Stream from "@effect/stream/Stream"
 import type { ResultBag } from "effect-react/hooks/useResultBag"
-import { updateNext, useResultBag } from "effect-react/hooks/useResultBag"
+import { initialTrackedProps, makeResultBag, updateTrackedProps } from "effect-react/hooks/useResultBag"
 import type { RuntimeContext } from "effect-react/internal/runtimeContext"
 import * as Result from "effect-react/Result"
-import { useCallback, useContext, useEffect, useState } from "react"
+import { useCallback, useContext, useRef, useSyncExternalStore } from "react"
+
+class FiberStore<R, E, A> {
+  constructor(
+    readonly runtime: Runtime.Runtime<R>
+  ) {}
+
+  listeners: Array<() => void> = []
+
+  subscribe = (listener: () => void) => {
+    this.listeners.push(listener)
+
+    return () => {
+      this.listeners.splice(this.listeners.indexOf(listener), 1)
+
+      queueMicrotask(() => {
+        if (this.listeners.length === 0) {
+          this.interruptIfRunning()
+        }
+      })
+    }
+  }
+
+  result: Result.Result<E, A> = Result.initial()
+  trackedProps = initialTrackedProps()
+  resultBag = makeResultBag(this.result, this.trackedProps)
+
+  setResult(result: Result.Result<E, A>) {
+    this.result = result
+    updateTrackedProps(result, this.trackedProps)
+    this.resultBag = makeResultBag(this.result, this.trackedProps)
+
+    for (let i = 0; i < this.listeners.length; i++) {
+      this.listeners[i]()
+    }
+  }
+  snapshot = () => {
+    return this.resultBag
+  }
+
+  fiberState:
+    | {
+      readonly fiber: Fiber.RuntimeFiber<E, void>
+      readonly interruptedRef: Ref.Ref<boolean>
+    }
+    | undefined = undefined
+
+  interruptIfRunning() {
+    if (this.fiberState) {
+      Effect.runSync(Ref.set(this.fiberState.interruptedRef, true))
+      Effect.runFork(
+        this.fiberState.fiber.interruptAsFork(this.fiberState.fiber.id())
+      )
+    }
+  }
+
+  run(stream: Stream.Stream<R, E, A>) {
+    this.interruptIfRunning()
+
+    const interruptedRef = Ref.unsafeMake(false)
+    const maybeSetResult = (result: Result.Result<E, A>) =>
+      Effect.flatMap(
+        Ref.get(interruptedRef),
+        (interrupted) =>
+          interrupted
+            ? Effect.unit
+            : Effect.sync(() => {
+              this.setResult(result)
+            })
+      )
+
+    const fiber = Stream.suspend(() => {
+      this.setResult(Result.waiting(this.result))
+      return stream
+    }).pipe(
+      Stream.tap((value) => maybeSetResult(Result.success(value))),
+      Stream.tapErrorCause((cause) => maybeSetResult(Result.failCause(cause))),
+      Stream.runDrain,
+      Runtime.runFork(this.runtime)
+    )
+
+    this.fiberState = {
+      fiber,
+      interruptedRef
+    }
+  }
+}
 
 export type UseResultCallback<R> = <Args extends Array<any>, R0 extends R, E, A>(
   callback: (...args: Args) => Effect.Effect<R0, E, A>
@@ -21,44 +107,17 @@ export const makeUseResultCallback: <R>(
   <Args extends Array<any>, R0 extends R, E, A>(
     f: (...args: Args) => Stream.Stream<R0, E, A>
   ) => {
-    const [result, setResult] = useState<Result.Result<E, A>>(Result.initial())
-    const [trackRef, resultBag] = useResultBag(result)
-    trackRef.current.currentStatus = result._tag
-
     const runtime = useContext(runtimeContext)
-    const [currentArgs, setCurrentArgs] = useState<Option.Option<Args>>(Option.none())
-    useEffect(() => {
-      if (Option.isNone(currentArgs)) {
-        return
-      }
-
-      let interrupting = false
-      const maybeSetResult = (result: Result.Result<E, A> | ((_: Result.Result<E, A>) => Result.Result<E, A>)) =>
-        Effect.sync(() => {
-          if (!interrupting) {
-            setResult(result)
-          }
-        })
-
-      const fiber = Stream.suspend(() => {
-        setResult((prev) => updateNext(Result.waiting(prev), trackRef))
-        return f(...currentArgs.value)
-      }).pipe(
-        Stream.tap((value) => maybeSetResult(updateNext(Result.success(value), trackRef))),
-        Stream.tapErrorCause((cause) => maybeSetResult(updateNext(Result.failCause(cause), trackRef))),
-        Stream.runDrain,
-        Runtime.runFork(runtime)
-      )
-
-      return () => {
-        interrupting = true
-        Effect.runFork(Fiber.interruptFork(fiber))
-      }
-    }, [f, currentArgs])
-
+    const storeRef = useRef<FiberStore<R0, E, A> | undefined>(undefined)
+    if (storeRef.current === undefined) {
+      storeRef.current = new FiberStore(runtime)
+    }
+    const resultBag = useSyncExternalStore(
+      storeRef.current!.subscribe,
+      storeRef.current!.snapshot
+    )
     const run = useCallback((...args: Args) => {
-      setCurrentArgs(Option.some(args))
-    }, [])
-
+      storeRef.current!.run(f(...args))
+    }, [f])
     return [resultBag, run] as const
   }

test/hooks/useResult.ts

@@ -26,10 +26,11 @@ describe("useResult", () => {
   it("should provide context", async () => {
     const testEffect = Effect.map(foo, (_) => _.value)
 
-    const { result } = await waitFor(async () => renderHook(() => useResult(testEffect)))
+    const renderResult = await waitFor(async () => renderHook(() => useResult(testEffect)))
+    const result = renderResult.result.current.result
 
-    await waitFor(() => expect(Result.isSuccess(result.current.result)).toBe(true))
-    expect(result.current.result.value).toBe(1)
+    await waitFor(() => expect(Result.isSuccess(result)).toBe(true))
+    expect(result._tag === "Success" && result.value).toBe(1)
   })
 
   it("should run streams", async () => {

test/hooks/useResultCallback.ts

@@ -13,7 +13,7 @@ const foo = Context.Tag<Foo>()
 
 const { useResultCallback } = RuntimeProvider.makeFromLayer(Layer.succeed(foo, { value: 1 }))
 
-describe("useResult", () => {
+describe("useResultCallback", () => {
   it("should do good", async () => {
     const testEffect = (value: number) => Effect.succeed(value)
 
@@ -24,11 +24,11 @@ describe("useResult", () => {
       result.current[1](1)
     })
     await waitFor(() => expect(Result.isSuccess(result.current[0].result)).toBe(true))
-    expect(result.current[0].result.value).toBe(1)
+    expect(result.current[0].result._tag === "Success" && result.current[0].result.value).toBe(1)
     act(() => {
       result.current[1](2)
     })
     await waitFor(() => expect(Result.isSuccess(result.current[0].result)).toBe(true))
-    expect(result.current[0].result.value).toBe(2)
+    expect(result.current[0].result._tag === "Success" && result.current[0].result.value).toBe(2)
   })
 })