Registry / messaging / react-use-websocket-lite

react-use-websocket-lite

library1.1.0jsnpmunverified

A lightweight React hook for WebSocket communication, forked from react-use-websocket and stripped of SocketIO, EventSource, and connection sharing features. Current stable version 1.1.0 (Feb 2025) targets React 18 and 19, ships TypeScript definitions, and reduces unnecessary re-renders compared to the original. It offers simple URL-based connection, automatic reconnection, and event callbacks (onOpen, onClose, onMessage, onError) while being easier to use performantly.

messaging

npm install react-use-websocket-lite

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-USE-WEBSOCKE

react-use-websocket-lite

messagingjavascriptv1.1.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

useWebSocket

✓ import useWebSocket from 'react-use-websocket-lite'

✗ const useWebSocket = require('react-use-websocket-lite');

Default export; the library is ESM-only in newer versions. CommonJS require() may fail in some bundlers.

ReadyState

✓ import { ReadyState } from 'react-use-websocket-lite'

✗ import ReadyState from 'react-use-websocket-lite';

ReadyState is a named export, not a default export.

SendMessage

✓ import { SendMessage } from 'react-use-websocket-lite'

✗ import { sendMessage } from 'react-use-websocket-lite';

SendMessage is a type export; use it for TypeScript typing, not the hook return value.

Demonstrates basic usage: connect to a WebSocket, listen for messages, and send a message when the connection opens.

import useWebSocket, { ReadyState } from 'react-use-websocket-lite'; import { useEffect, useState } from 'react'; function Demo() { const [messages, setMessages] = useState<string[]>([]); const { sendMessage, readyState } = useWebSocket({ url: process.env.WS_URL ?? 'wss://echo.websocket.org', onMessage(event) { if (typeof event.data === 'string') { setMessages(prev => [...prev, event.data]); } } }); useEffect(() => { if (readyState === ReadyState.OPEN) { sendMessage('hello'); } }, [readyState]); return <pre>{JSON.stringify(messages, null, 2)}</pre>; }

Debug

Known issues

breakingThe library does not support SocketIO or EventSource; attempting to use them will not work.

fix

Use dedicated libraries like socket.io-client or eventsource for those protocols.

affects: >=1.0.0

breakingNo connection sharing. Each useWebSocket call creates its own WebSocket connection.

fix

If you need connection sharing, consider the original react-use-websocket.

affects: >=1.0.0

deprecatedThe old option `fromSocketIO` and `share` are removed. No replacement.

fix

Remove these options.

affects: >=1.0.0

gotchaThe hook may not be SSR-safe without checking for WebSocket existence.

fix

Wrap useWebSocket in a useEffect or use a dynamic import.

affects: >=1.0.0

gotchaThe `connect` option defaults to `true`; setting it `false` prevents connection but the hook still returns methods.

fix

Pass `{ connect: false }` if you don't want the connection to start immediately.

affects: >=1.0.0

Errors

Common errors & fixes

Cannot find module 'react-use-websocket-lite'

Package not installed or incorrect import path.

fix

Run `npm install react-use-websocket-lite`.

WebSocket is not defined

Code running in a non-browser environment (e.g., server-side rendering).

fix

Use dynamic import or check for `typeof window !== 'undefined'` before calling the hook.

TypeError: useWebSocket is not a function

Importing useWebSocket as a named export instead of default.

fix

Change to `import useWebSocket from 'react-use-websocket-lite'`.

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency; requires React 18 or 19.

Agent activity

20 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/michaelboyles/react-use-websocket-lite ↗

packagereact-use-websocket-lite ↗

homepagehttps://github.com/michaelboyles/react-use-websocket-lite#readme ↗