Subscription Playground

() => {
  const [play, setPlay] = React.useState(false)
  const [forceUpdate, setForceUpdate] = React.useState(0)
  const [events, setEvents] = React.useState([])
  const handleEvent = React.useCallback((event) => {
    setEvents((prevState) => [...prevState, event])
  }, [])
  const feed = React.useMemo(() => new Feed(), [])
  React.useEffect(() => {
    feed.connect('wss://demo.dxfeed.com/webservice/cometd')
    return () => feed.disconnect()
  }, [])
  React.useEffect(() => {
    let unsubscribe
    if (play) {
      setEvents([])
      unsubscribe = feed.subscribe(['Trade'], ['ETH/USD'], handleEvent)
    }
    return () => unsubscribe && unsubscribe()
  }, [play, forceUpdate])
  return (
    <>
      <Button variant="outlined" onClick={() => setPlay(!play)}>
        {play ? 'Stop' : 'Start'}
      </Button>
      {play && (
        <Button variant="outlined" onClick={() => setForceUpdate({})}>
          Resubscribe
        </Button>
      )}
      <DataViewer play={play} events={events} />
    </>
  )
}