react-rx 1.0.0-beta.6 → 2.0.0

package/.idea/compiler.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="TypeScriptCompiler">
-    <option name="showAllErrors" value="true" />
+    <option name="nodeInterpreterTextField" value="node" />
   </component>
 </project>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,6 +1,7 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
     <inspection_tool class="TypescriptExplicitMemberType" enabled="false" level="INFORMATION" enabled_by_default="false" />
   </profile>
 </component>

package/.idea/markdown.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="MarkdownSettings">
+    <enabledExtensions>
+      <entry key="MermaidLanguageExtension" value="false" />
+      <entry key="PlantUMLLanguageExtension" value="false" />
+    </enabledExtensions>
+  </component>
+</project>

package/.idea/misc.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptSettings">
-    <option name="languageLevel" value="ES6" />
-  </component>
-</project>

package/dist/cjs/WithObservable.js

@@ -4,9 +4,9 @@ exports.WithObservable = void 0;
 var operators_1 = require("rxjs/operators");
 var reactiveComponent_1 = require("./reactiveComponent");
 function createWithObservable() {
-    return reactiveComponent_1.reactiveComponent(function (props$) {
-        return props$.pipe(operators_1.distinctUntilChanged(function (props, prevProps) { return props.observable === prevProps.observable; }), operators_1.switchMap(function (props) {
-            return props.observable.pipe(operators_1.map(function (observableValue) { return props.children(observableValue); }));
+    return (0, reactiveComponent_1.reactiveComponent)(function (props$) {
+        return props$.pipe((0, operators_1.distinctUntilChanged)(function (props, prevProps) { return props.observable === prevProps.observable; }), (0, operators_1.switchMap)(function (props) {
+            return props.observable.pipe((0, operators_1.map)(function (observableValue) { return props.children(observableValue); }));
         }));
     });
 }

package/dist/cjs/displayName.js

@@ -8,6 +8,6 @@ var getDisplayName = function (Component) {
     return (Component && (Component.displayName || Component.name)) || 'Unknown';
 };
 var wrapDisplayName = function (BaseComponent, wrapperName) {
-    return wrapperName + "(" + getDisplayName(BaseComponent) + ")";
+    return "".concat(wrapperName, "(").concat(getDisplayName(BaseComponent), ")");
 };
 exports.wrapDisplayName = wrapDisplayName;

package/dist/cjs/reactiveComponent.js

@@ -7,14 +7,14 @@ var useObservable_1 = require("./useObservable");
 var react_1 = require("react");
 function fromComponent(component) {
     var wrappedComponent = function (props) {
-        return react_1.createElement(react_1.Fragment, null, useObservable_1.useObservable(react_1.useRef(component(useAsObservable_1.useAsObservable(props))).current));
+        return (0, react_1.createElement)(react_1.Fragment, null, (0, useObservable_1.useObservable)((0, react_1.useRef)(component((0, useAsObservable_1.useAsObservable)(props))).current));
     };
-    wrappedComponent.displayName = displayName_1.wrapDisplayName(component, 'reactiveComponent');
+    wrappedComponent.displayName = (0, displayName_1.wrapDisplayName)(component, 'reactiveComponent');
     return wrappedComponent;
 }
 function fromObservable(input$) {
     return function ReactiveComponent() {
-        return react_1.createElement(react_1.Fragment, null, useObservable_1.useObservable(input$));
+        return (0, react_1.createElement)(react_1.Fragment, null, (0, useObservable_1.useObservable)(input$));
     };
 }
 function reactiveComponent(observableOrComponent) {
@@ -24,10 +24,10 @@ function reactiveComponent(observableOrComponent) {
 }
 exports.reactiveComponent = reactiveComponent;
 function forwardRef(component) {
-    var wrappedComponent = react_1.forwardRef(function (props, ref) {
-        return react_1.createElement(react_1.Fragment, null, useObservable_1.useObservable(react_1.useRef(component(useAsObservable_1.useAsObservable(props), ref)).current));
+    var wrappedComponent = (0, react_1.forwardRef)(function (props, ref) {
+        return (0, react_1.createElement)(react_1.Fragment, null, (0, useObservable_1.useObservable)((0, react_1.useRef)(component((0, useAsObservable_1.useAsObservable)(props), ref)).current));
     });
-    wrappedComponent.displayName = displayName_1.wrapDisplayName(component, 'reactiveComponent');
+    wrappedComponent.displayName = (0, displayName_1.wrapDisplayName)(component, 'reactiveComponent');
     return wrappedComponent;
 }
 exports.forwardRef = forwardRef;

package/dist/cjs/useAsObservable.js

@@ -5,27 +5,19 @@ var rxjs_1 = require("rxjs");
 var react_1 = require("react");
 var useIsomorphicEffect_1 = require("./useIsomorphicEffect");
 function useAsObservable(value, operator) {
-    var isInitial = react_1.useRef(true);
-    var subjectRef = react_1.useRef(new rxjs_1.BehaviorSubject(value));
-    var observableRef = react_1.useRef();
-    if (!observableRef.current) {
-        var observable = subjectRef.current.asObservable();
-        observableRef.current = operator ? observable.pipe(operator) : observable;
-    }
-    useIsomorphicEffect_1.useIsomorphicEffect(function () {
-        if (isInitial.current) {
-            isInitial.current = false;
-        }
-        else {
-            // emit only on update
-            subjectRef.current.next(value);
-        }
+    var _a = (0, react_1.useMemo)(function () {
+        var subject = new rxjs_1.BehaviorSubject(value);
+        var observable = subject.asObservable();
+        return [operator ? observable.pipe(operator) : observable, subject];
+    }, []), observable = _a[0], subject = _a[1];
+    (0, useIsomorphicEffect_1.useIsomorphicEffect)(function () {
+        subject.next(value);
     }, [value]);
-    useIsomorphicEffect_1.useIsomorphicEffect(function () {
+    (0, react_1.useEffect)(function () {
         return function () {
-            return subjectRef.current.complete();
+            subject.complete();
         };
     }, []);
-    return observableRef.current;
+    return observable;
 }
 exports.useAsObservable = useAsObservable;

package/dist/cjs/useObservable.js

@@ -1,45 +1,40 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMemoObservable = exports.useObservable = void 0;
+var rxjs_1 = require("rxjs");
 var react_1 = require("react");
-var useIsomorphicEffect_1 = require("./useIsomorphicEffect");
+var useAsObservable_1 = require("./useAsObservable");
+var operators_1 = require("rxjs/operators");
+var shim_1 = require("use-sync-external-store/shim");
 function getValue(value) {
     return typeof value === 'function' ? value() : value;
 }
-function useObservable(observable, initialValue) {
-    var subscription = react_1.useRef();
-    var isInitial = react_1.useRef(true);
-    var _a = react_1.useState(function () {
-        var isSync = true;
-        var syncVal = getValue(initialValue);
-        subscription.current = observable.subscribe(function (nextVal) {
-            if (isSync) {
-                syncVal = nextVal;
-            }
-            else {
-                setState(nextVal);
-            }
-        });
-        isSync = false;
-        return syncVal;
-    }), value = _a[0], setState = _a[1];
-    useIsomorphicEffect_1.useIsomorphicEffect(function () {
-        // when the observable changes after initial (possibly sync render)
-        if (!isInitial.current) {
-            subscription.current = observable.subscribe(function (nextVal) { return setState(nextVal); });
-        }
-        isInitial.current = false;
-        return function () {
-            if (subscription.current) {
-                subscription.current.unsubscribe();
-                subscription.current = undefined;
-            }
+function useObservableSubscription(observable) {
+    var store = (0, react_1.useMemo)(function () {
+        var currentValue;
+        return {
+            // Note: this works because the given observable always emits a value synchronously by concat-ing the given initialValue
+            getCurrentValue: function () { return currentValue; },
+            subscribe: function (callback) {
+                var subscription = observable.subscribe(function (value) {
+                    currentValue = value;
+                    callback(value);
+                });
+                return function () {
+                    subscription.unsubscribe();
+                };
+            },
         };
     }, [observable]);
-    return value;
+    return (0, shim_1.useSyncExternalStore)(store.subscribe, store.getCurrentValue);
+}
+function useObservable(observable, initialValue) {
+    return useObservableSubscription((0, useAsObservable_1.useAsObservable)(observable, (0, rxjs_1.pipe)((0, operators_1.distinctUntilChanged)(), (0, operators_1.switchMap)(function (observable) {
+        return (0, rxjs_1.merge)((0, rxjs_1.defer)(function () { return (0, rxjs_1.of)(getValue(initialValue)); }), observable);
+    }))));
 }
 exports.useObservable = useObservable;
 function useMemoObservable(observableOrFactory, deps, initialValue) {
-    return useObservable(react_1.useMemo(function () { return getValue(observableOrFactory); }, deps), initialValue);
+    return useObservable((0, react_1.useMemo)(function () { return getValue(observableOrFactory); }, deps), initialValue);
 }
 exports.useMemoObservable = useMemoObservable;

package/dist/cjs/useObservableCallback.js

@@ -6,14 +6,14 @@ var observable_callback_1 = require("observable-callback");
 var EMPTY_DEPS = [];
 function useObservableCallback(fn, dependencies) {
     if (dependencies === void 0) { dependencies = EMPTY_DEPS; }
-    var callbackRef = react_1.useRef();
+    var callbackRef = (0, react_1.useRef)();
     if (!callbackRef.current) {
-        callbackRef.current = observable_callback_1.observableCallback();
+        callbackRef.current = (0, observable_callback_1.observableCallback)();
     }
     var _a = callbackRef.current, calls$ = _a[0], call = _a[1];
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    var callback = react_1.useCallback(fn, dependencies);
-    react_1.useEffect(function () {
+    var callback = (0, react_1.useCallback)(fn, dependencies);
+    (0, react_1.useEffect)(function () {
         var subscription = calls$.pipe(callback).subscribe();
         return function () {
             subscription.unsubscribe();

package/dist/cjs/useWithObservable.js

@@ -5,7 +5,7 @@ var useObservable_1 = require("./useObservable");
 var useAsObservable_1 = require("./useAsObservable");
 function useWithObservable(value, operator) {
     return operator
-        ? useObservable_1.useObservable(useAsObservable_1.useAsObservable(value, operator))
-        : useObservable_1.useObservable(useAsObservable_1.useAsObservable(value));
+        ? (0, useObservable_1.useObservable)((0, useAsObservable_1.useAsObservable)(value, operator))
+        : (0, useObservable_1.useObservable)((0, useAsObservable_1.useAsObservable)(value));
 }
 exports.useWithObservable = useWithObservable;

package/dist/cjs/utils.js

@@ -5,26 +5,26 @@ var useAsObservable_1 = require("./useAsObservable");
 var observable_callback_1 = require("observable-callback");
 var operators_1 = require("rxjs/operators");
 var react_1 = require("react");
-var createState = function (initialState) { return observable_callback_1.observableCallback(operators_1.startWith(initialState)); };
+var createState = function (initialState) { return (0, observable_callback_1.observableCallback)((0, operators_1.startWith)(initialState)); };
 function observeState(initial) {
-    var _a = react_1.useState(initial), value = _a[0], update = _a[1];
-    return [useAsObservable_1.useAsObservable(value), update];
+    var _a = (0, react_1.useState)(initial), value = _a[0], update = _a[1];
+    return [(0, useAsObservable_1.useAsObservable)(value), update];
 }
 exports.observeState = observeState;
 function observeCallback(operator) {
-    var ref = react_1.useRef();
+    var ref = (0, react_1.useRef)();
     if (!ref.current) {
-        ref.current = operator ? observable_callback_1.observableCallback(operator) : observable_callback_1.observableCallback();
+        ref.current = operator ? (0, observable_callback_1.observableCallback)(operator) : (0, observable_callback_1.observableCallback)();
     }
     return ref.current;
 }
 exports.observeCallback = observeCallback;
 function observeContext(context) {
-    return useAsObservable_1.useAsObservable(react_1.useContext(context));
+    return (0, useAsObservable_1.useAsObservable)((0, react_1.useContext)(context));
 }
 exports.observeContext = observeContext;
 function observeElement() {
-    var ref = react_1.useRef();
+    var ref = (0, react_1.useRef)();
     if (!ref.current) {
         ref.current = createState(null);
     }

package/dist/cjs/withPropsStream.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -39,13 +43,13 @@ var reactiveComponent_1 = require("./reactiveComponent");
  * @deprecated Use reactiveComponent instead
  */
 function withPropsStream(observableOrFactory, TargetComponent) {
-    var ComposedComponent = reactiveComponent_1.reactiveComponent(function (sourceProps$) {
+    var ComposedComponent = (0, reactiveComponent_1.reactiveComponent)(function (sourceProps$) {
         var targetProps$ = typeof observableOrFactory === 'function'
             ? observableOrFactory(sourceProps$)
             : observableOrFactory;
-        return targetProps$.pipe(operators_1.map(function (props) { return React.createElement(TargetComponent, __assign({}, props)); }));
+        return targetProps$.pipe((0, operators_1.map)(function (props) { return React.createElement(TargetComponent, __assign({}, props)); }));
     });
-    ComposedComponent.displayName = displayName_1.wrapDisplayName(TargetComponent, 'withPropsStream');
+    ComposedComponent.displayName = (0, displayName_1.wrapDisplayName)(TargetComponent, 'withPropsStream');
     return ComposedComponent;
 }
 exports.withPropsStream = withPropsStream;

package/dist/es2015/useAsObservable.js

@@ -1,27 +1,19 @@
 import { BehaviorSubject } from 'rxjs';
-import { useRef } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useIsomorphicEffect } from './useIsomorphicEffect';
 export function useAsObservable(value, operator) {
-    const isInitial = useRef(true);
-    const subjectRef = useRef(new BehaviorSubject(value));
-    const observableRef = useRef();
-    if (!observableRef.current) {
-        const observable = subjectRef.current.asObservable();
-        observableRef.current = operator ? observable.pipe(operator) : observable;
-    }
+    const [observable, subject] = useMemo(() => {
+        const subject = new BehaviorSubject(value);
+        const observable = subject.asObservable();
+        return [operator ? observable.pipe(operator) : observable, subject];
+    }, []);
     useIsomorphicEffect(() => {
-        if (isInitial.current) {
-            isInitial.current = false;
-        }
-        else {
-            // emit only on update
-            subjectRef.current.next(value);
-        }
+        subject.next(value);
     }, [value]);
-    useIsomorphicEffect(() => {
+    useEffect(() => {
         return () => {
-            return subjectRef.current.complete();
+            subject.complete();
         };
     }, []);
-    return observableRef.current;
+    return observable;
 }

package/dist/es2015/useObservable.js

@@ -1,39 +1,32 @@
-import { useMemo, useRef, useState } from 'react';
-import { useIsomorphicEffect } from './useIsomorphicEffect';
+import { defer, merge, of, pipe } from 'rxjs';
+import { useMemo } from 'react';
+import { useAsObservable } from './useAsObservable';
+import { distinctUntilChanged, switchMap } from 'rxjs/operators';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 function getValue(value) {
     return typeof value === 'function' ? value() : value;
 }
-export function useObservable(observable, initialValue) {
-    const subscription = useRef();
-    const isInitial = useRef(true);
-    const [value, setState] = useState(() => {
-        let isSync = true;
-        let syncVal = getValue(initialValue);
-        subscription.current = observable.subscribe(nextVal => {
-            if (isSync) {
-                syncVal = nextVal;
-            }
-            else {
-                setState(nextVal);
-            }
-        });
-        isSync = false;
-        return syncVal;
-    });
-    useIsomorphicEffect(() => {
-        // when the observable changes after initial (possibly sync render)
-        if (!isInitial.current) {
-            subscription.current = observable.subscribe(nextVal => setState(nextVal));
-        }
-        isInitial.current = false;
-        return () => {
-            if (subscription.current) {
-                subscription.current.unsubscribe();
-                subscription.current = undefined;
-            }
+function useObservableSubscription(observable) {
+    const store = useMemo(() => {
+        let currentValue;
+        return {
+            // Note: this works because the given observable always emits a value synchronously by concat-ing the given initialValue
+            getCurrentValue: () => currentValue,
+            subscribe: (callback) => {
+                const subscription = observable.subscribe(value => {
+                    currentValue = value;
+                    callback(value);
+                });
+                return () => {
+                    subscription.unsubscribe();
+                };
+            },
         };
     }, [observable]);
-    return value;
+    return useSyncExternalStore(store.subscribe, store.getCurrentValue);
+}
+export function useObservable(observable, initialValue) {
+    return useObservableSubscription(useAsObservable(observable, pipe(distinctUntilChanged(), switchMap(observable => merge(defer(() => of(getValue(initialValue))), observable)))));
 }
 export function useMemoObservable(observableOrFactory, deps, initialValue) {
     return useObservable(useMemo(() => getValue(observableOrFactory), deps), initialValue);

package/dist/esm/displayName.js

@@ -5,5 +5,5 @@ var getDisplayName = function (Component) {
     return (Component && (Component.displayName || Component.name)) || 'Unknown';
 };
 export var wrapDisplayName = function (BaseComponent, wrapperName) {
-    return wrapperName + "(" + getDisplayName(BaseComponent) + ")";
+    return "".concat(wrapperName, "(").concat(getDisplayName(BaseComponent), ")");
 };

package/dist/esm/useAsObservable.js

@@ -1,27 +1,19 @@
 import { BehaviorSubject } from 'rxjs';
-import { useRef } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useIsomorphicEffect } from './useIsomorphicEffect';
 export function useAsObservable(value, operator) {
-    var isInitial = useRef(true);
-    var subjectRef = useRef(new BehaviorSubject(value));
-    var observableRef = useRef();
-    if (!observableRef.current) {
-        var observable = subjectRef.current.asObservable();
-        observableRef.current = operator ? observable.pipe(operator) : observable;
-    }
+    var _a = useMemo(function () {
+        var subject = new BehaviorSubject(value);
+        var observable = subject.asObservable();
+        return [operator ? observable.pipe(operator) : observable, subject];
+    }, []), observable = _a[0], subject = _a[1];
     useIsomorphicEffect(function () {
-        if (isInitial.current) {
-            isInitial.current = false;
-        }
-        else {
-            // emit only on update
-            subjectRef.current.next(value);
-        }
+        subject.next(value);
     }, [value]);
-    useIsomorphicEffect(function () {
+    useEffect(function () {
         return function () {
-            return subjectRef.current.complete();
+            subject.complete();
         };
     }, []);
-    return observableRef.current;
+    return observable;
 }

package/dist/esm/useObservable.js

@@ -1,39 +1,34 @@
-import { useMemo, useRef, useState } from 'react';
-import { useIsomorphicEffect } from './useIsomorphicEffect';
+import { defer, merge, of, pipe } from 'rxjs';
+import { useMemo } from 'react';
+import { useAsObservable } from './useAsObservable';
+import { distinctUntilChanged, switchMap } from 'rxjs/operators';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 function getValue(value) {
     return typeof value === 'function' ? value() : value;
 }
-export function useObservable(observable, initialValue) {
-    var subscription = useRef();
-    var isInitial = useRef(true);
-    var _a = useState(function () {
-        var isSync = true;
-        var syncVal = getValue(initialValue);
-        subscription.current = observable.subscribe(function (nextVal) {
-            if (isSync) {
-                syncVal = nextVal;
-            }
-            else {
-                setState(nextVal);
-            }
-        });
-        isSync = false;
-        return syncVal;
-    }), value = _a[0], setState = _a[1];
-    useIsomorphicEffect(function () {
-        // when the observable changes after initial (possibly sync render)
-        if (!isInitial.current) {
-            subscription.current = observable.subscribe(function (nextVal) { return setState(nextVal); });
-        }
-        isInitial.current = false;
-        return function () {
-            if (subscription.current) {
-                subscription.current.unsubscribe();
-                subscription.current = undefined;
-            }
+function useObservableSubscription(observable) {
+    var store = useMemo(function () {
+        var currentValue;
+        return {
+            // Note: this works because the given observable always emits a value synchronously by concat-ing the given initialValue
+            getCurrentValue: function () { return currentValue; },
+            subscribe: function (callback) {
+                var subscription = observable.subscribe(function (value) {
+                    currentValue = value;
+                    callback(value);
+                });
+                return function () {
+                    subscription.unsubscribe();
+                };
+            },
         };
     }, [observable]);
-    return value;
+    return useSyncExternalStore(store.subscribe, store.getCurrentValue);
+}
+export function useObservable(observable, initialValue) {
+    return useObservableSubscription(useAsObservable(observable, pipe(distinctUntilChanged(), switchMap(function (observable) {
+        return merge(defer(function () { return of(getValue(initialValue)); }), observable);
+    }))));
 }
 export function useMemoObservable(observableOrFactory, deps, initialValue) {
     return useObservable(useMemo(function () { return getValue(observableOrFactory); }, deps), initialValue);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-rx",
-  "version": "1.0.0-beta.6",
+  "version": "2.0.0",
   "description": "React + RxJS = <3",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -25,8 +25,8 @@
     "observable-callback": "^1.0.1"
   },
   "peerDependencies": {
-    "react": ">=16.8",
-    "rxjs": "^6"
+    "react": "^16.8 || ^17 || ^18",
+    "rxjs": "^6.5 || ^7"
   },
   "devDependencies": {
     "@testing-library/dom": "^7.29.6",
@@ -35,6 +35,7 @@
     "@types/jest": "^26.0.20",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",
+    "@types/use-sync-external-store": "^0.0.3",
     "@typescript-eslint/eslint-plugin": "^4.15.2",
     "@typescript-eslint/parser": "^4.15.2",
     "eslint": "^7.21.0",
@@ -48,6 +49,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-test-renderer": "^17.0.1",
+    "use-sync-external-store": "^1.2.0",
     "rimraf": "^3.0.2",
     "rxjs": "^6.5.5",
     "ts-jest": "^26.5.2",

package/src/useAsObservable.ts

@@ -1,5 +1,5 @@
-import {BehaviorSubject, Observable, Subject} from 'rxjs'
-import {useRef} from 'react'
+import {BehaviorSubject, Observable} from 'rxjs'
+import {useEffect, useMemo} from 'react'
 import {useIsomorphicEffect} from './useIsomorphicEffect'
 
 /**
@@ -17,27 +17,22 @@ export function useAsObservable<T, K = T>(
   value: T,
   operator?: (input: Observable<T>) => Observable<K>,
 ): Observable<T | K> {
-  const isInitial = useRef(true)
-  const subjectRef = useRef<Subject<T>>(new BehaviorSubject(value))
-  const observableRef = useRef<Observable<T | K>>()
-  if (!observableRef.current) {
-    const observable = subjectRef.current.asObservable()
-    observableRef.current = operator ? observable.pipe(operator) : observable
-  }
+  const [observable, subject] = useMemo(() => {
+    const subject = new BehaviorSubject(value)
+
+    const observable = subject.asObservable()
+    return [operator ? observable.pipe(operator) : observable, subject]
+  }, [])
 
   useIsomorphicEffect(() => {
-    if (isInitial.current) {
-      isInitial.current = false
-    } else {
-      // emit only on update
-      subjectRef.current.next(value)
-    }
+    subject.next(value)
   }, [value])
-  useIsomorphicEffect(() => {
+
+  useEffect(() => {
     return () => {
-      return subjectRef.current.complete()
+      subject.complete()
     }
   }, [])
 
-  return observableRef.current
+  return observable
 }