Playing around with React Hooks + Callbags

Timer.js

import React, { useState, useEffect } from "react";

import { interval, map, pipe, merge } from "callbag-basics";
import subscribe from "callbag-subscribe";
import of from "callbag-of";

const usePipeStream = fns => {
  const [value, setValue] = useState(null);
  // maybe should use useCallback on the pipe and then run it
  useEffect(
    () =>
      pipe(
        ...fns,
        subscribe(setValue)
      ),
    fns
  );
  return value;
};

const intervalImmediate = intervalMs => {
  let count = 0;
  return pipe(
    merge(of(0), interval(intervalMs)),
    map(() => count++)
  );
};

const ticker = intervalImmediate(1000);
// const ticker = interval(1000);
const mapper = map(x => `${x} count`);

export default function Timer() {
  const count = usePipeStream([ticker, mapper]);
  console.log({ count });
  return <h1>{count}</h1>;
}