useSubscription

Category

@RxJS

Export Size

94 B

Package

@reause/rxjs

Last Changed

5 days ago

Use an RxJS Subscription without worrying about unsubscribing from it or creating memory leaks.

Demo

Install

npm i rxjs

Usage

import { useSubscription } from '@reause/rxjs'
import { useState } from 'react'
import { interval } from 'rxjs'

export function Counter() {
  const [count, setCount] = useState(0)

  // useSubscription calls the unsubscribe method before unmounting the component
  useSubscription(
    interval(1000)
      .subscribe(() => {
        setCount(c => c + 1)
      }),
  )

  return (
    <p>
      Counter:
      {count}
    </p>
  )
}

The subscription is torn down in the effect cleanup when the component unmounts, so the call site never needs its own unsubscribe. Like useObservable, the subscription argument is not an effect dependency: a new identity on a later render does not re-subscribe. Create the subscription once — with useState's lazy initializer, useRef, or a module-scope value — when the component re-renders.

Type Declarations

export interface UnsubscribableLike {
    unsubscribe: () => void;
}

export function useSubscription(subscription: UnsubscribableLike): void

Source

Source · Demo

Contributors

Changelog

v0.1.0 on

e10de - feat(rxjs): implement useSubscription (#219)