# With React Context

React Context is an easy way to share data at any level down the component tree.

This article shares some of the patterns to use observable-hooks with React Context.

Also see the context example project.

# With Normal Value

Conventionally we pass normal values down the Context. React offers a useContext hook to cosume the value.

This can be easily captured by the useObservable hooks.

const normalValueList$ = useObservable(
  inputs$ => inputs$.pipe(
    scan((acc, inputs) => [...acc, ...inputs], []),
    take(10)
  ),
  [useContext(NormalValueContext)]
)

# With Observable Value

You can also pass Observables down the Context.

These Observables can be subscribed directly with useSubscription which will automatically unsubscribe the old one and resubscribe to the new one.

const num$ = useContext(ObservableValueContext)
useSubscription(num$, value => {
  console.log('useSubscription', value)
})

useObservableState and other state hooks work the same as they use useSubscription under the hood.

const num$ = useContext(ObservableValueContext)
const num = useObservableState(num$)
console.log('useObservableState', num)

If you need to transform(pipe) the Observable then you should list it as dependency since it may change over time.

const num$ = useContext(ObservableValueContext)

const numList$ = useObservable(
  input$ => input$.pipe(
    switchMap(([num$]) =>
      num$.pipe(
        scan((acc, inputs) => [...acc, inputs], []),
        take(20)
      )
    )
  ),
  [num$]
)

You may skip this if you are sure that the Observable will not change.

const num$ = useContext(ObservableValueContext)
const numList$ = useObservable(() =>
  // Will be called only once
  num$.pipe(
    scan((acc, inputs) => [...acc, inputs], []),
    take(20)
  )
)