use-observable-ref.ts

import { useRef, useState, MutableRefObject } from 'react';

type ValueCallback<T> = (value: T) => void;

export type ObservableRef<T> = MutableRefObject<T> & {
  subscribe(onNext: ValueCallback<T>): Subscription;
};

export interface Subscription {
  unsubscribe(): void;
}

export function useObservableRef<T>(initialValue: T): ObservableRef<T> {
  const ref = useRef(initialValue);
  const [observable] = useState<ObservableRef<T>>(() => {
    const callbacks = new Set<ValueCallback<T>>();

    return {
      get current() {
        return ref.current;
      },
      set current(value) {
        ref.current = value;

        callbacks.forEach((callback) => {
          callback(value);
        });
      },
      subscribe(onNext) {
        callbacks.add(onNext);

        return {
          unsubscribe() {
            callbacks.delete(onNext);
          },
        };
      },
    };
  });

  return observable;
}