React Bindings Overview — React Bindings

Package Exports

import {
  EdgeStreamProvider,      // context provider — wraps the app
  useEdgeStream,           // access the EdgeStream client from any component
  useSubscription,         // subscribe to a topic, auto-cleanup on unmount
  useConnectionStatus,     // reactive connection status + stats + health
} from 'edge-stream-js-react';

Why React Bindings?

Without React bindings, you must manually manage subscription cleanup in useEffect return functions. This is error-prone — a missed cleanup causes memory leaks and phantom handlers after component unmount:

// Without React bindings — manual cleanup (error-prone)
useEffect(() => {
  const sub = stream.subscribe('bas', 'workflow.*', handler);
  return () => sub.unsubscribe(); // easy to forget
}, []);

// With React bindings — cleanup is automatic
useSubscription('bas', 'workflow.*', handler);
// unsubscribes automatically when component unmounts

Hooks at a Glance

Hook	Returns	Purpose
`useEdgeStream()`	EdgeStream client	Access the client to call subscribe(), send(), server() etc.
`useSubscription(serverId, topic, handler, options?)`	`{ isSubscribed, unsubscribe, error }`	Subscribe with automatic lifecycle management
`useConnectionStatus()`	`{ status, stats, health, isReady }`	Reactive connection state, message counts, health metrics

Quick Start

// 1. Wrap your app
import { createEdgeStream } from 'edge-stream-js';
import { EdgeStreamProvider } from 'edge-stream-js-react';

const stream = createEdgeStream({ logLevel: 'info' });
stream.registerServer({ id: 'bas', type: 'bas', url: '/hubs/edge-stream',
  transportConfig: { type: 'signalr', url: '/hubs/edge-stream' } });

function App() {
  return (
    <EdgeStreamProvider edgeStreamClient={stream}>
      <YourApp />
    </EdgeStreamProvider>
  );
}

// 2. Subscribe in any component
import { useSubscription } from 'edge-stream-js-react';

function WorkflowStatus() {
  useSubscription('bas', 'workflow.*', (envelope) => {
    console.log('Workflow event:', envelope.meta.topic, envelope.body);
  });
  return <div>...</div>;
}

← Previous Guide: Observability Next: EdgeStreamProvider →