Rewriting mapPropsStream with Hooks or new Lifecycle Methods about recompose HOT 4 OPEN

const useStream = <T, R>(
  project: (stream$: Observable<T>) => Observable<R>,
  data: T,
): R | undefined => {
  const prev = useRef<T>()
  const stream$ = useRef(new Subject<T>())
  const emit = useRef<R>()
  const synchronous = useRef(true)
  const [_, rerender] = useState(false)

  useLayoutEffect(() => {
    const subscription = stream$.current.pipe(project).subscribe({
      next: (next) => {
        emit.current = next
        if (!synchronous.current) {
          rerender((prev) => !prev)
        }
      }
    })

    stream$.current.next(data)
    return () => subscription.unsubscribe()
  }, [])

  synchronous.current = true
  if (prev.current !== data) {
    emit.current = undefined
    stream$.current.next(data)
  }
  prev.current = data
  synchronous.current = false

  return emit.current
}

export const Widget: SFC<{}> = () => {
  const [channel, setChannel] = useState('friend-list')
  const selectChannel = useCallback(({ target: { value } }) => setChannel(value), [])
  const next = useStream((stream$) => stream$.pipe(
    switchMap(() => interval(500).pipe(
      startWith(-1),
      scan<number, number[]>((data) => [...data, Math.floor(Math.random() * 10)], []),
      take(4),
    )),
  ), channel)

  return el('div', null,
    el('div', null,
      el('select', { value: channel, onChange: selectChannel },
       el('option', { value: 'friend-list' }, 'Friends'),
       el('option', { value: 'enemy-list' }, 'Enemies'),
       el('option', { value: 'grocery-list' }, 'Groceries'))),
    el('h1', null, channel),
    el('ul', null, ...(next || []).map((item, idx) => (
      el('li', { key: idx }, item))))
  )
}