Example React Hooks

useStream.ts

import { Stream } from '@keiii/k-stream';
import { Reducer, useLayoutEffect, useReducer } from 'react';

export const useStream = <T>(stream: Stream<T>): T | null => {
  const [value, next] = useReducer<Reducer<T | null, T | null>>(
    (_, action) => action,
    stream.lastValue ?? null,
  );

  useLayoutEffect(() => {
    next(stream.lastValue ?? null); // observable value may change beetween render and value commit
    return stream.subscribe({ next }).unsubscribe;
  }, [stream]);

  return value;
};

useBehaviourSubject.ts

import { BehaviourSubject } from '@keiii/k-stream';
import { Reducer, useLayoutEffect, useReducer } from 'react';

export const useBehaviourSubject = <T>(subject: BehaviourSubject<T>): T => {
  const [value, next] = useReducer<Reducer<T, T>>(
    (_, action) => action,
    subject.value,
  );

  useLayoutEffect(() => {
    next(subject.value); // observable value may change beetween render and value commit
    return subject.subscribe({ next }).unsubscribe;
  }, [subject]);

  return value;
};