#useWebSocketOutbox

The messages waiting in an outbox, oldest first. Re-renders when they change.

function useWebSocketOutbox<M>(outbox: WebSocketOutbox<M> | null | undefined): readonly OutboxEntry<M>[];

#Usage

import { useWebSocketOutbox } from 'react-websocket';
import { orders } from './orders';

function SyncBanner() {
  const waiting = useWebSocketOutbox(orders);
  if (!waiting.length) return null;
  const sending = waiting.filter(entry => entry.sent).length;
  return (
    <p role="status">
      {waiting.length} orders waiting to sync{sending ? `, ${sending} sent` : ''}
    </p>
  );
}

#Parameters

#Returns

The waiting OutboxEntry<M>s: id, message, createdAt, and sent, which is true while an entry has been sent on the current connection and waits for the server's acknowledgement.

#Behavior

• Doesn't hold the connection. The outbox itself holds it while anything is waiting.
• Server rendering. The list is empty on the server and during hydration, then shows the stored entries once they're loaded.
• Stable. The same array is returned until something changes, so it's safe in effect dependencies.