diff --git a/packages/core/src/Subscribe.tsx b/packages/core/src/Subscribe.tsx index 51afdc2..8c52199 100644 --- a/packages/core/src/Subscribe.tsx +++ b/packages/core/src/Subscribe.tsx @@ -1,6 +1,5 @@ -import React, { useState } from "react" +import React, { useState, useEffect } from "react" import { Observable } from "rxjs" -import useLayoutEffect from "./useLayoutEffect" /** * A React Component that creates a subscription to the provided observable once @@ -16,7 +15,7 @@ export const Subscribe: React.FC<{ fallback?: null | JSX.Element }> = ({ source$, children, fallback }) => { const [mounted, setMounted] = useState(0) - useLayoutEffect(() => { + useEffect(() => { const subscription = source$.subscribe() setMounted(1) return () => subscription.unsubscribe() diff --git a/packages/core/src/internal/useObservable.ts b/packages/core/src/internal/useObservable.ts index 1916a3f..985eae7 100644 --- a/packages/core/src/internal/useObservable.ts +++ b/packages/core/src/internal/useObservable.ts @@ -1,8 +1,7 @@ -import { useReducer } from "react" -import { Observable } from "rxjs" +import { useEffect, useReducer } from "react" import { BehaviorObservable } from "./BehaviorObservable" import { SUSPENSE } from "../SUSPENSE" -import useLayoutEffect from "../useLayoutEffect" +import { Observable } from "rxjs" const ERROR: "e" = "e" const VALUE: "v" = "v" @@ -41,7 +40,7 @@ export const useObservable = ( ): Exclude => { const [state, dispatch] = useReducer(reducer, source$, init) - useLayoutEffect(() => { + useEffect(() => { const subscription = defaultSUSPENSE(source$).subscribe( (value) => { if ((value as any) === SUSPENSE) { @@ -62,6 +61,7 @@ export const useObservable = ( return () => subscription.unsubscribe() }, [source$]) - if (state.type === VALUE) return state.payload - throw state.payload + const { type, payload } = state + if (type === VALUE) return payload + throw payload } diff --git a/packages/core/src/useLayoutEffect.ts b/packages/core/src/useLayoutEffect.ts deleted file mode 100644 index 6eccc89..0000000 --- a/packages/core/src/useLayoutEffect.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { useLayoutEffect } from "react" -import { noop } from "rxjs" - -const isSSR = process.env.IS_SSR -// istanbul ignore next -export default (isSSR ? noop : useLayoutEffect) as typeof useLayoutEffect diff --git a/packages/core/src/useSubscribe.ts b/packages/core/src/useSubscribe.ts index 17fa648..09ccee1 100644 --- a/packages/core/src/useSubscribe.ts +++ b/packages/core/src/useSubscribe.ts @@ -1,5 +1,5 @@ import { Observable } from "rxjs" -import useLayoutEffect from "./useLayoutEffect" +import { useEffect } from "react" /** * A React hook that creates a subscription to the provided observable once the @@ -11,7 +11,7 @@ import useLayoutEffect from "./useLayoutEffect" * @remarks This hook doesn't trigger any updates. */ export const useSubscribe = (source$: Observable) => { - useLayoutEffect(() => { + useEffect(() => { const subscription = source$.subscribe() return () => subscription.unsubscribe() }, [source$])