Refresh observable on dependency change

README.md

@@ -88,6 +88,7 @@ declare function useObservable<State, Inputs>(
  inputFactory: InputFactory<State, Inputs>,
  initialState: State,
  inputs: RestrictArray<Inputs>,
+ deps: readonly any[],
 ): State
 ```
 
@@ -183,6 +184,30 @@ function App() {
 ReactDOM.render(<App />, document.querySelector('#root'))
 ```
 
+**Refresh ovbservable on dependency change**
+
+```tsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { useObservable } from 'rxjs-hooks'
+import { from } from 'rxjs'
+import { map, take } from 'rxjs/operators'
+
+function App(props: { foo: number }) {
+ const value = useObservable(() => from([1, 2, 3, 4]).pipe(
+ map(val => val + props.foo)
+ ), 200, [props.foo])
+ return (
+ // render four times
+ // 2, 4, 5, 6
+ <h1>{value}</h1>
+ )
+}
+
+ReactDOM.render(<App foo={1} />, document.querySelector('#app'))
+ReactDOM.render(<App foo={2} />, document.querySelector('#app'))
+```
+
 ### `useEventCallback`
 
 ```tsx

src/use-observable.ts

@@ -13,12 +13,14 @@ export function useObservable<State, Inputs>(
  inputFactory: InputFactory<State, Inputs>,
  initialState: State,
  inputs: RestrictArray<Inputs>,
+ deps: readonly any[],
 ): State
 
 export function useObservable<State, Inputs extends ReadonlyArray<any>>(
  inputFactory: InputFactory<State, Inputs>,
  initialState?: State,
  inputs?: RestrictArray<Inputs>,
+ deps: readonly any[] = [],
 ): State | null {
  const [state, setState] = useState(typeof initialState !== 'undefined' ? initialState : null)
 
@@ -36,31 +38,28 @@ export function useObservable<State, Inputs extends ReadonlyArray<any>>(
  inputs$.next(inputs)
  }, inputs || [])
 
- useEffect(
- () => {
- let output$: BehaviorSubject<State>
- if (inputs) {
- output$ = (inputFactory as (
- inputs$: Observable<RestrictArray<Inputs> | undefined>,
- state$: Observable<State | undefined>,
- ) => Observable<State>)(inputs$, state$) as BehaviorSubject<State>
- } else {
- output$ = (inputFactory as (state$: Observable<State | undefined>) => Observable<State>)(
- state$,
- ) as BehaviorSubject<State>
- }
- const subscription = output$.subscribe((value) => {
- state$.next(value)
- setState(value)
- })
- return () => {
- subscription.unsubscribe()
- inputs$.complete()
- state$.complete()
- }
- },
- [], // immutable forever
- )
+ useEffect(() => {
+ let output$: BehaviorSubject<State>
+ if (inputs) {
+ output$ = (inputFactory as (
+ inputs$: Observable<RestrictArray<Inputs> | undefined>,
+ state$: Observable<State | undefined>,
+ ) => Observable<State>)(inputs$, state$) as BehaviorSubject<State>
+ } else {
+ output$ = (inputFactory as (state$: Observable<State | undefined>) => Observable<State>)(
+ state$,
+ ) as BehaviorSubject<State>
+ }
+ const subscription = output$.subscribe((value) => {
+ state$.next(value)
+ setState(value)
+ })
+ return () => {
+ subscription.unsubscribe()
+ inputs$.complete()
+ state$.complete()
+ }
+ }, deps)
 
  return state
 }