> ## Documentation Index
> Fetch the complete documentation index at: https://docs.0xmonaco.com/llms.txt
> Use this file to discover all available pages before exploring further.

# useTradeFeed

> Real-time trade feed via WebSocket

```tsx theme={null}
import { useTradeFeed } from "@0xmonaco/react";

const { 
  trades,
  subscribed,
  fetchingInitialState,
  error
} = useTradeFeed(tradingPairId);
```

## Parameters

<ParamField path="tradingPairId" type="string" required>
  Trading pair UUID. Get this from `sdk.market.getTradingPairBySymbol('ETH/USDC')`.
</ParamField>

<Note>
  The trade feed maintains a **fixed limit of 50 trades**. This limit is not configurable and is enforced internally to optimize memory and performance.
</Note>

## Return Values

<ResponseField name="trades" type="TradeEvent[]">
  Array of recent trades (newest first). Fixed at 50 trades maximum.
</ResponseField>

<ResponseField name="subscribed" type="boolean">
  Whether currently subscribed to the trading pair. Will be false if SDK is not yet initialized.
</ResponseField>

<ResponseField name="fetchingInitialState" type="boolean">
  Whether the initial trades are being fetched via REST API.
</ResponseField>

<ResponseField name="error" type="Error | null">
  WebSocket error if any
</ResponseField>

## Example

```tsx theme={null}
import { useTradeFeed, useMarket } from "@0xmonaco/react";
import { useEffect, useState } from "react";

function TradeFeed() {
  const { getTradingPairBySymbol } = useMarket();
  const [tradingPairId, setTradingPairId] = useState<string | null>(null);
  
  useEffect(() => {
    getTradingPairBySymbol('ETH/USDC').then(pair => {
      setTradingPairId(pair.id);
    });
  }, []);
  
  const { trades, subscribed, error } = useTradeFeed(tradingPairId ?? '');
  
  if (!tradingPairId) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h2>Recent Trades {subscribed ? '(live)' : '(connecting...)'}</h2>
      <ul>
        {trades.map(trade => (
          <li key={trade.data.tradeId}>
            {trade.data.makerSide} {trade.data.quantity} @ {trade.data.price}
          </li>
        ))}
      </ul>
    </div>
  );
}
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.