useBehaviorState (BehaviorSubject)

[hd-o]

Has there been any discussion around including a hook that facilitates working with BehaviorSubject?

If not, what is your opinion on having such hook included in the library?

// file: app.tsx

import { useBehaviorState } from 'observable-hooks'
import { FC } from 'react'
import { render } from 'react-dom'
import { BehaviorSubject } from 'rxjs'

const count$ = new BehaviorSubject(0)

const App: FC = () => {
  const [count, setCount] = useBehaviorState(count$)
  const handleIncrement = () => setCount(count + 1)
  return (
    <div>
      <p>{count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  )
}

// file: observable-hooks/src/use-behavior-state.ts

import { BehaviorSubject } from 'rxjs'
import { useObservableEagerState } from './use-observable-eager-state'

type BehaviorState <V> = [V, BehaviorSubject<V>['next']]

type UseBehaviorState = <V> ($: BehaviorSubject<V>) => BehaviorState<V>

export const useBehaviorState: UseBehaviorState = (state$) => {
  const value = useObservableEagerState(state$)
  return [value, state$.next.bind(state$)]
}

[crimx]

1. You can just use useObservableState which is optimized for BehaviorSubject.
2. There is a slight cost of creating state$.next.bind on each rendering.
3. It seems that there is not much of a difference between setCount and count$.next. But feel free to use whatever makes sense to you and your team.

  const App: FC = () => {
    const count = useObservableState(count$)
    const handleIncrement = () => count$.next(count + 1)
    return (
      <div>
        <p>{count}</p>
        <button onClick={handleIncrement}>Increment</button>
      </div>
    )
  }

[hd-o]

Thanks for the reply! useObservableState works perfectly, I overlooked it.