react hook renaming

tim-smart · Sep 24, 2023 · 7483263 · 7483263
1 parent b56f132
commit 7483263
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 46 deletions.
diff --git a/.changeset/curvy-shoes-poke.md b/.changeset/curvy-shoes-poke.md
@@ -0,0 +1,5 @@
+---
+"@effect-rx/rx-react": patch
+---
+
+mount Rx in mutation hooks
diff --git a/.changeset/thirty-deers-shout.md b/.changeset/thirty-deers-shout.md
@@ -0,0 +1,5 @@
+---
+"@effect-rx/rx-react": minor
+---
+
+rename react hooks
diff --git a/docs/rx-react/index.ts.md b/docs/rx-react/index.ts.md
@@ -15,14 +15,14 @@ Added in v1.0.0
 - [context](#context)
   - [RegistryContext](#registrycontext)
 - [hooks](#hooks)
-  - [useMountRx](#usemountrx)
-  - [useRefreshRx](#userefreshrx)
   - [useRx](#userx)
+  - [useRxMount](#userxmount)
   - [useRxRef](#userxref)
+  - [useRxRefresh](#userxrefresh)
+  - [useRxSet](#userxset)
   - [useRxSuspense](#userxsuspense)
   - [useRxSuspenseSuccess](#userxsuspensesuccess)
   - [useRxValue](#userxvalue)
-  - [useSetRx](#usesetrx)
 
 ---
 
@@ -40,44 +40,54 @@ Added in v1.0.0
 
 # hooks
 
-## useMountRx
+## useRx
 
 **Signature**
 
 ```ts
-export declare const useMountRx: <A>(rx: Rx.Rx<A>) => void
+export declare const useRx: <R, W>(
+  rx: Rx.Writable<R, W>
+) => readonly [value: R, setOrUpdate: (_: W | ((_: R) => W)) => void]
 ```
 
 Added in v1.0.0
 
-## useRefreshRx
+## useRxMount
 
 **Signature**
 
 ```ts
-export declare const useRefreshRx: <A>(rx: Rx.Rx<A> & Rx.Refreshable) => () => void
+export declare const useRxMount: <A>(rx: Rx.Rx<A>) => void
 ```
 
 Added in v1.0.0
 
-## useRx
+## useRxRef
 
 **Signature**
 
 ```ts
-export declare const useRx: <R, W>(
-  rx: Rx.Writable<R, W>
-) => readonly [value: R, setOrUpdate: (_: W | ((_: R) => W)) => void]
+export declare const useRxRef: <A>(ref: RxRef.ReadonlyRef<A>) => A
 ```
 
 Added in v1.0.0
 
-## useRxRef
+## useRxRefresh
 
 **Signature**
 
 ```ts
-export declare const useRxRef: <A>(ref: RxRef.ReadonlyRef<A>) => A
+export declare const useRxRefresh: <A>(rx: Rx.Rx<A> & Rx.Refreshable) => () => void
+```
+
+Added in v1.0.0
+
+## useRxSet
+
+**Signature**
+
+```ts
+export declare const useRxSet: <R, W>(rx: Rx.Writable<R, W>) => (_: W | ((_: R) => W)) => void
 ```
 
 Added in v1.0.0
@@ -117,13 +127,3 @@ export declare const useRxValue: <A>(rx: Rx.Rx<A>) => A
 ```
 
 Added in v1.0.0
-
-## useSetRx
-
-**Signature**
-
-```ts
-export declare const useSetRx: <R, W>(rx: Rx.Writable<R, W>) => (_: W | ((_: R) => W)) => void
-```
-
-Added in v1.0.0
diff --git a/packages/rx-react/src/index.ts b/packages/rx-react/src/index.ts
@@ -48,12 +48,7 @@ function makeStore<A>(registry: Registry.Registry, rx: Rx.Rx<A>): RxStore<A> {
   return newStore
 }
 
-/**
- * @since 1.0.0
- * @category hooks
- */
-export const useRxValue = <A>(rx: Rx.Rx<A>): A => {
-  const registry = React.useContext(RegistryContext)
+function useStore<A>(registry: Registry.Registry, rx: Rx.Rx<A>): A {
   const store = makeStore(registry, rx)
   return React.useSyncExternalStore(store.subscribe, store.snapshot)
 }
@@ -62,8 +57,16 @@ export const useRxValue = <A>(rx: Rx.Rx<A>): A => {
  * @since 1.0.0
  * @category hooks
  */
-export const useSetRx = <R, W>(rx: Rx.Writable<R, W>): (_: W | ((_: R) => W)) => void => {
+export const useRxValue = <A>(rx: Rx.Rx<A>): A => {
   const registry = React.useContext(RegistryContext)
+  return useStore(registry, rx)
+}
+
+function mountRx<A>(registry: Registry.Registry, rx: Rx.Rx<A>): void {
+  React.useEffect(() => registry.mount(rx), [rx, registry])
+}
+
+function setRx<R, W>(registry: Registry.Registry, rx: Rx.Writable<R, W>): (_: W | ((_: R) => W)) => void {
   return React.useCallback((value) => {
     if (typeof value === "function") {
       registry.set(rx, (value as any)(registry.get(rx)))
@@ -78,8 +81,28 @@ export const useSetRx = <R, W>(rx: Rx.Writable<R, W>): (_: W | ((_: R) => W)) =>
  * @since 1.0.0
  * @category hooks
  */
-export const useRefreshRx = <A>(rx: Rx.Rx<A> & Rx.Refreshable): () => void => {
+export const useRxMount = <A>(rx: Rx.Rx<A>): void => {
+  const registry = React.useContext(RegistryContext)
+  mountRx(registry, rx)
+}
+
+/**
+ * @since 1.0.0
+ * @category hooks
+ */
+export const useRxSet = <R, W>(rx: Rx.Writable<R, W>): (_: W | ((_: R) => W)) => void => {
   const registry = React.useContext(RegistryContext)
+  mountRx(registry, rx)
+  return setRx(registry, rx)
+}
+
+/**
+ * @since 1.0.0
+ * @category hooks
+ */
+export const useRxRefresh = <A>(rx: Rx.Rx<A> & Rx.Refreshable): () => void => {
+  const registry = React.useContext(RegistryContext)
+  mountRx(registry, rx)
   return React.useCallback(() => {
     registry.refresh(rx)
   }, [registry, rx])
@@ -89,11 +112,15 @@ export const useRefreshRx = <A>(rx: Rx.Rx<A> & Rx.Refreshable): () => void => {
  * @since 1.0.0
  * @category hooks
  */
-export const useRx = <R, W>(rx: Rx.Writable<R, W>): readonly [value: R, setOrUpdate: (_: W | ((_: R) => W)) => void] =>
-  [
-    useRxValue(rx),
-    useSetRx(rx)
+export const useRx = <R, W>(
+  rx: Rx.Writable<R, W>
+): readonly [value: R, setOrUpdate: (_: W | ((_: R) => W)) => void] => {
+  const registry = React.useContext(RegistryContext)
+  return [
+    useStore(registry, rx),
+    setRx(registry, rx)
   ] as const
+}
 
 type SuspenseResult<E, A> =
   | {
@@ -152,8 +179,7 @@ export const useRxSuspense = <E, A>(
     () => (options?.suspendOnWaiting ? suspenseRxWaiting(rx) : suspenseRx(rx)),
     [options?.suspendOnWaiting, rx]
   )
-  const store = makeStore(registry, resultRx)
-  const result = React.useSyncExternalStore(store.subscribe, store.snapshot)
+  const result = useStore(registry, resultRx)
   if (result._tag === "Suspended") {
     if (!suspenseMounts.has(resultRx)) {
       suspenseMounts.add(resultRx)
@@ -192,15 +218,6 @@ export const useRxSuspenseSuccess = <E, A>(
   }
 }
 
-/**
- * @since 1.0.0
- * @category hooks
- */
-export const useMountRx = <A>(rx: Rx.Rx<A>): void => {
-  const registry = React.useContext(RegistryContext)
-  React.useEffect(() => registry.mount(rx), [rx, registry])
-}
-
 /**
  * @since 1.0.0
  * @category hooks