useObservableState.ts

useObservableState.ts

import { useState, useRef, useEffect } from 'react';
import { BehaviorSubject } from 'rxjs';

export default function useObservableState<TElement>(initialValue: TElement) {
  const observableRef = useRef(new BehaviorSubject(initialValue));
  const [value, setValue] = useState(initialValue);

  useEffect(() => {
    observableRef.current.next(value);
  }, [value]);

  useEffect(() => {
    const subscription = observableRef.current.subscribe((newValue) => setValue(newValue));
    return () => subscription.unsubscribe();
  }, []);

  return [value, setValue, observableRef.current] as const;
}