A practical WebSocket setup for React using TypeScript classes and TanStack Store

IOTech Hub's resource offers insights, tutorials, and resources for Internet of Things (IoT) enthusiasts and developers. Readers can learn about IoT technologies, hardware platforms, and application development. With articles, tutorials, and case studies, IOTech Hub provides  guidance and expertise for building connected devices and IoT solutions.

iO tech_hub

A developer built a custom TypeScript class-based WebSocket library for React after finding existing solutions like react-use-websocket lacking key features. The library uses three core classes: WebsocketConnection (singleton per URL with heartbeat, reconnection, and exponential backoff), WebsocketSubscriptionApi (streaming subscriptions), and WebsocketMessageApi (promise-based request/response). TanStack Store handles reactivity inside the classes, so only components reading specific store slices re-render. Key design decisions include lazy connection opening, shared instances per key to avoid subscribe/unsubscribe churn across page navigation, URI-based message routing, and thin React hook wrappers around the class instances. The post covers the architecture, edge cases like request overwriting and close code handling, and provides a downloadable package.

A TypeScript Class-Based WebSocket Library for React

Inspiration: TanStack Form's Class-Based APIs

Connection Lifecycle: When It Stays Open and When It Closes