diff --git a/README.md b/README.md
index 6100cdd..fef15ab 100644
--- a/README.md
+++ b/README.md
@@ -29,6 +29,8 @@
- [Factory of Observables overload](#factory-of-observables-overload)
- [shareLatest](#sharelatest)
- [SUSPENSE](#suspense)
+ - [useSubscribe](#usesubscribe)
+ - [Subscribe](#subscribe)
- [Examples](#examples)
## Installation
@@ -129,6 +131,33 @@ This is a special symbol that can be emitted from our observables to let the rea
know that there is a value on its way, and that we want to leverage React Suspense
while we are waiting for that value.
+### useSubscribe
+
+A React hook that creates a subscription to the provided observable once the
+component mounts and it unsubscribes when the component unmounts.
+
+Arguments:
+
+- `source$`: Source observable that the hook will subscribe to.
+- `unsubscribeGraceTime`: Amount of time in ms that the hook should wait before
+ unsubscribing from the source observable after it unmounts (default = 200).
+
+Important: This hook doesn't trigger any updates.
+
+### Subscribe
+
+A React Component that creates a subscription to the provided observable once
+the component mounts and it unsubscribes from it when the component unmounts.
+
+Properties:
+
+- `source$`: Source observable that the Component will subscribe to.
+- `graceTime`: an optional property that describes the amount of time in ms
+ that the Component should wait before unsubscribing from the source observable
+ after it unmounts (default = 200).
+
+Important: This Component doesn't trigger any updates.
+
## Examples
- [This is a contrived example](https://codesandbox.io/s/crazy-wood-vn7gg?file=/src/fakeApi.js) based on [this example](https://reactjs.org/docs/concurrent-mode-patterns.html#reviewing-the-changes) from the React docs.
diff --git a/packages/core/README.md b/packages/core/README.md
index f28dd89..1bb7230 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -97,3 +97,30 @@ const story$ = selectedStoryId$.pipe(
This is a special symbol that can be emitted from our observables to let the react hook
know that there is a value on its way, and that we want to leverage React Suspense
while we are waiting for that value.
+
+### useSubscribe
+
+A React hook that creates a subscription to the provided observable once the
+component mounts and it unsubscribes when the component unmounts.
+
+Arguments:
+
+- `source$`: Source observable that the hook will subscribe to.
+- `unsubscribeGraceTime`: Amount of time in ms that the hook should wait before
+ unsubscribing from the source observable after it unmounts (default = 200).
+
+Important: This hook doesn't trigger any updates.
+
+### Subscribe
+
+A React Component that creates a subscription to the provided observable once
+the component mounts and it unsubscribes from it when the component unmounts.
+
+Properties:
+
+- `source$`: Source observable that the Component will subscribe to.
+- `graceTime`: an optional property that describes the amount of time in ms
+ that the Component should wait before unsubscribing from the source observable
+ after it unmounts (default = 200).
+
+Important: This Component doesn't trigger any updates.
diff --git a/packages/utils/src/Subscribe.test.tsx b/packages/core/src/Subscribe.test.tsx
similarity index 62%
rename from packages/utils/src/Subscribe.test.tsx
rename to packages/core/src/Subscribe.test.tsx
index d086259..67efa48 100644
--- a/packages/utils/src/Subscribe.test.tsx
+++ b/packages/core/src/Subscribe.test.tsx
@@ -34,30 +34,4 @@ describe("Subscribe", () => {
expect(nSubscriptions).toBe(0)
})
-
- it("unsubscribes synchronously if the graceTime is zero", async () => {
- let nSubscriptions = 0
- const source$ = defer(() => {
- nSubscriptions++
- return new Subject()
- }).pipe(
- finalize(() => {
- nSubscriptions--
- }),
- share(),
- )
-
- const TestSubscribe: React.FC = () => (
-
- )
-
- expect(nSubscriptions).toBe(0)
-
- const { unmount } = render()
-
- expect(nSubscriptions).toBe(1)
-
- unmount()
- expect(nSubscriptions).toBe(0)
- })
})
diff --git a/packages/utils/src/Subscribe.tsx b/packages/core/src/Subscribe.tsx
similarity index 100%
rename from packages/utils/src/Subscribe.tsx
rename to packages/core/src/Subscribe.tsx
diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx
index df8b054..3fba874 100644
--- a/packages/core/src/index.tsx
+++ b/packages/core/src/index.tsx
@@ -1,3 +1,5 @@
export { bind } from "./bind"
export { shareLatest } from "./shareLatest"
export { SUSPENSE } from "./SUSPENSE"
+export { useSubscribe } from "./useSubscribe"
+export { Subscribe } from "./Subscribe"
diff --git a/packages/utils/src/useSubscribe.test.ts b/packages/core/src/useSubscribe.test.ts
similarity index 59%
rename from packages/utils/src/useSubscribe.test.ts
rename to packages/core/src/useSubscribe.test.ts
index ba03784..e68ecf2 100644
--- a/packages/utils/src/useSubscribe.test.ts
+++ b/packages/core/src/useSubscribe.test.ts
@@ -20,7 +20,7 @@ describe("useSubscribe", () => {
expect(nSubscriptions).toBe(0)
- const { unmount } = renderHook(() => useSubscribe(source$))
+ const { unmount } = renderHook(() => useSubscribe(source$, 201))
expect(nSubscriptions).toBe(1)
@@ -31,26 +31,4 @@ describe("useSubscribe", () => {
expect(nSubscriptions).toBe(0)
})
-
- it("unsubscribes synchronously if the graceTime is zero", async () => {
- let nSubscriptions = 0
- const source$ = defer(() => {
- nSubscriptions++
- return new Subject()
- }).pipe(
- finalize(() => {
- nSubscriptions--
- }),
- share(),
- )
-
- expect(nSubscriptions).toBe(0)
-
- const { unmount } = renderHook(() => useSubscribe(source$, 0))
-
- expect(nSubscriptions).toBe(1)
-
- unmount()
- expect(nSubscriptions).toBe(0)
- })
})
diff --git a/packages/utils/src/useSubscribe.ts b/packages/core/src/useSubscribe.ts
similarity index 80%
rename from packages/utils/src/useSubscribe.ts
rename to packages/core/src/useSubscribe.ts
index 4f367f2..7e449ef 100644
--- a/packages/utils/src/useSubscribe.ts
+++ b/packages/core/src/useSubscribe.ts
@@ -19,12 +19,11 @@ export const useSubscribe = (
useEffect(() => {
const subscription = source$.subscribe()
return () => {
- if (unsubscribeGraceTime === 0) {
- return subscription.unsubscribe()
- }
- setTimeout(() => {
- subscription.unsubscribe()
- }, unsubscribeGraceTime)
+ /* istanbul ignore else */
+ if (unsubscribeGraceTime !== Infinity)
+ setTimeout(() => {
+ subscription.unsubscribe()
+ }, unsubscribeGraceTime)
}
}, [source$, unsubscribeGraceTime])
}
diff --git a/packages/utils/README.md b/packages/utils/README.md
index 5033f26..faf5af9 100644
--- a/packages/utils/README.md
+++ b/packages/utils/README.md
@@ -6,33 +6,6 @@
## API
-### useSubscribe
-
-A React hook that creates a subscription to the provided observable once the
-component mounts and it unsubscribes when the component unmounts.
-
-Arguments:
-
-- `source$`: Source observable that the hook will subscribe to.
-- `unsubscribeGraceTime`: Amount of time in ms that the hook should wait before
- unsubscribing from the source observable after it unmounts (default = 200).
-
-Important: This hook doesn't trigger any updates.
-
-### Subscribe
-
-A React Component that creates a subscription to the provided observable once
-the component mounts and it unsubscribes from it when the component unmounts.
-
-Properties:
-
-- `source$`: Source observable that the Component will subscribe to.
-- `graceTime`: an optional property that describes the amount of time in ms
- that the Component should wait before unsubscribing from the source observable
- after it unmounts (default = 200).
-
-Important: This Component doesn't trigger any updates.
-
### split
A RxJS operator that groups the items emitted by the source based on the
diff --git a/packages/utils/src/index.tsx b/packages/utils/src/index.tsx
index 1b2e01d..a913abf 100644
--- a/packages/utils/src/index.tsx
+++ b/packages/utils/src/index.tsx
@@ -1,5 +1,3 @@
-export { useSubscribe } from "./useSubscribe"
-export { Subscribe } from "./Subscribe"
export { collectValues } from "./collectValues"
export { collect } from "./collect"
export { mergeWithKey } from "./mergeWithKey"