feat: 🎸 use-observable support deps

Author: NetanelBasal

README.md

@@ -41,6 +41,18 @@ function CounterComponent() {
 
 `useObservable` can take the initial value as the second parameter - `useObservable(source$, initialValue)`. If the source fires synchronously immediately (like in a `BehaviorSubject`), the value will be used as the initial value.
 
+You can also pass a dependencies:
+
+```tsx
+import { useObservable } from '@ngneat/react-rxjs';
+
+const SomeComponent = ({ id }: { id: string }) => {
+  const [state] = useObservable(getStream$(id), { deps: [id] })
+
+  return state;
+}
+```
+
 
 ## useUntilDestroyed
 

package.json

@@ -8,7 +8,9 @@
     "lint": "nx run-many --target=lint --exclude=playground --all",
     "build": "nx build react-rxjs",
     "c": "git-cz",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "update": "nx migrate latest",
+    "migrate": "nx migrate --run-migrations"
   },
   "private": true,
   "devDependencies": {
@@ -67,3 +69,4 @@
     ]
   }
 }
+

packages/react-rxjs/src/use-observable/use-observable.spec.ts renamed to packages/react-rxjs/src/use-observable/use-observable.spec.tsx

@@ -2,28 +2,51 @@ import { useObservable } from './use-observable';
 import { renderHook, act } from '@testing-library/react-hooks';
 import { interval, BehaviorSubject, of } from 'rxjs';
 import { finalize, map } from 'rxjs/operators';
+import { useState } from 'react';
+import { render, fireEvent } from '@testing-library/react';
 
 jest.useFakeTimers();
 
-describe('useObservable', () => {
-    it('should support BehaviorSubject', () => {
-        const query = new BehaviorSubject('init');
-        const { result } = renderHook(() => useObservable(query));
-        let [next] = result.current;
+const store = new BehaviorSubject('1');
 
-        expect(next).toBe('init');
+function getStream$(id: string) {
+    return of(id);
+}
 
-        act(() => query.next('2'));
+const SomeComponent = ({ id }: { id: string }) => {
+    const [state] = useObservable(getStream$(id), { deps: [id] })
 
-        [next] = result.current;
-        expect(next).toBe('2');
-    });
+    return <p data-testid="p">{state}</p>
+}
+
+const OuterComponent = () => {
+    const [id, setId] = useState('1');
+
+    return <>
+        <button data-testid="btn" onClick={() => setId('2')}>Change id</button>
+        <SomeComponent id={id} />
+    </>
+}
+
+
+describe('Deps change', () => {
+    it('should subscribe to the new obseravble', () => {
+        const { getByTestId } = render(<OuterComponent />);
+        expect(getByTestId('p').innerHTML).toBe('1');
+        fireEvent.click(getByTestId('btn'));
+        expect(getByTestId('p').innerHTML).toBe('2');
+    })
+})
+
+describe('useObservable', () => {
+
+    beforeEach(() => jest.clearAllTimers());
 
     it('should update every second', () => {
-        const { result } = renderHook(() => useObservable(interval(1000), { initialValue: 0 }));
+        const { result } = renderHook(() => useObservable(interval(1000), { initialValue: -1 }));
         let [next] = result.current;
 
-        expect(next).toBe(0);
+        expect(next).toBe(-1);
 
         act(() => {
             jest.advanceTimersByTime(1000);
@@ -42,27 +65,42 @@ describe('useObservable', () => {
         expect(next).toBe(1);
     });
 
+
+
     it('should return an error', () => {
         const { result } = renderHook(() => useObservable(of(1).pipe(map(error => {
             throw new Error('error');
-        })), { initialValue: 0 }));
+        }))));
 
         const [next, { error, completed }] = result.current;
 
         expect(error).toEqual(new Error('error'));
-        expect(next).toEqual(0);
+        expect(next).toEqual(undefined);
         expect(completed).toEqual(false)
     })
 
+
+    it('should support BehaviorSubject', () => {
+        const query = new BehaviorSubject('init');
+        const { result } = renderHook(() => useObservable(query));
+        let [next] = result.current;
+
+        expect(next).toBe('init');
+
+        act(() => query.next('2'));
+
+        [next] = result.current;
+        expect(next).toBe('2');
+    });
     it('should unsubscribe', () => {
         const spy = jest.fn();
 
-        const { result, unmount } = renderHook(() => useObservable(interval(1000).pipe(finalize(spy)), { initialValue: 0 }));
+        const { result, unmount } = renderHook(() => useObservable(interval(1000).pipe(finalize(spy)), { initialValue: -1 }));
 
-        // eslint-disable-next-line prefer-const
+        // // eslint-disable-next-line prefer-const
         let [next] = result.current;
 
-        expect(next).toBe(0);
+        expect(next).toBe(-1);
 
         act(() => {
             jest.advanceTimersByTime(1000);

packages/react-rxjs/src/use-observable/use-observable.ts

@@ -1,71 +1,52 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { Observable, Subscription } from 'rxjs';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, DependencyList, useMemo, useReducer } from 'react';
 
 export function useObservable<T, E>(
   source$: Observable<T>,
-  { initialValue }: { initialValue?: T | undefined } = {}
+  { deps = [], initialValue }: { deps?: DependencyList, initialValue?: T } = {}
 ): [T, { error: E | undefined, completed: boolean, subscription: Subscription | undefined }] {
-  const sourceRef$ = useRef<Observable<T>>(source$);
-  const subscription = useRef<Subscription | undefined>();
 
+  const sourceRef = useMemo(() => source$, deps);
+  const subscription = useRef(new Subscription());
+  const nextValue = useRef<T | undefined>(initialValue);
+  const [error, setError] = useState();
+  const [completed, setCompleted] = useState<boolean>(false);
   const emitsInitialSyncValue = initialValue === undefined;
+  const [_, forceUpdate] = useReducer(x => x + 1, 0);
 
-  const [error, setError] = useState<E | undefined>();
-  const [completed, setComplete] = useState<boolean>(false);
-
-  const [next, setValue] = useState<T>(() => {
+  useMemo(() => {
     if (emitsInitialSyncValue) {
-      let firstValue: T | undefined = undefined;
-
-      let subscription: Subscription | null = sourceRef$.current.subscribe(
-        (v) => {
-          firstValue = v;
-        }
-      );
+      let subscription: Subscription | null = sourceRef.subscribe(v => {
+        nextValue.current = v;
+      });
 
       subscription.unsubscribe();
       subscription = null;
-
-      return firstValue! as T;
     }
-
-    return initialValue!;
-  });
+  }, deps);
 
   useEffect(() => {
-    const base = {
-      error: setError,
-      complete() {
-        setComplete(true);
-      },
-    };
-    if (emitsInitialSyncValue) {
-      let firstEmission = true;
-      subscription.current = sourceRef$.current.subscribe({
-        next(v) {
-          if (!firstEmission) {
-            setValue(v);
-            return;
-          }
+    let firstEmission = true;
+
+    subscription.current = sourceRef.subscribe({
+      next(value) {
+        if (emitsInitialSyncValue && firstEmission) {
           firstEmission = false;
-        },
-        ...base,
-      });
-    } else {
-      subscription.current = sourceRef$.current.subscribe({
-        next: setValue,
-        ...base,
-      });
-    }
+        } else {
+          nextValue.current = value;
+          forceUpdate();
+        }
+      },
+      error: setError,
+      complete: setCompleted.bind(null, true)
+    })
 
     return () => {
-      if (!subscription.current?.closed) {
-        subscription.current?.unsubscribe();
-      }
-    };
+      subscription?.current.unsubscribe();
+    }
+  }, deps);
 
-  }, [emitsInitialSyncValue]);
 
-  return [next, { error, completed, subscription: subscription.current }];
+  return [nextValue.current!, { error, completed, subscription: subscription.current }];
 }