Example of creating a hook instead of an HoC-type thing

entry.jsx

import React, { useEffect, useState } from 'react'
import { render } from 'react-dom'
import { interval } from 'rxjs'
import { map } from 'rxjs/operators'

const getPusher = () => interval(500).pipe(
  map(() => ({ message: 'New Pusher Message', time: new Date() }))
)

const usePusher = () => {
  const [isSubscribed, setSubscribed] = useState(false)
  const [stepOutput, setStepOutput] = useState([])

  useEffect(() => {
    const pusherUpdate$ = getPusher()

    const subscription = pusherUpdate$.subscribe(
      message => setStepOutput(oldSteps => ([...oldSteps, message]))
    )
      
    setSubscribed(true)

    return () => subscription.unsubscribe()
  }, [stepOutput])

  return { stepOutput, isSubscribed }
}

const App = () => {
  const { stepOutput, isSubscribed } = usePusher()

  if (!isSubscribed) {
    return 'Loading...'
  }

  return (
    <div>
      {stepOutput.map((_, i) => <p key={i}>Number {i + 1} of step output</p>)}
    </div>
  )
}

render(
  <App />,
  document.getElementById('app')
)