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

# Network quality and diagnostics

> Monitor network quality, topology, and CPU load in React with useNetwork and useCPULoad, and adapt your UI to poor conditions.

Real calls run on imperfect networks and busy devices. [`useNetwork`](/reference/daily-react/use-network) and [`useCPULoad`](/reference/daily-react/use-cpu-load) let you surface connection quality to users and adapt the UI when conditions degrade.

## Show network quality

`useNetwork` returns the current `networkState`, the reasons behind it, and the connection `topology`:

```jsx theme={null}
import { useNetwork } from '@daily-co/daily-react';

function NetworkBadge() {
  const { networkState } = useNetwork();
  // 'good' | 'warning' | 'bad' | 'unknown'
  const color = { good: 'green', warning: 'orange', bad: 'red' }[networkState] ?? 'gray';
  return <span style={{ color }}>● {networkState}</span>;
}
```

When the state is `'warning'` or `'bad'`, `networkStateReasons` tells you why (`'sendPacketLoss'`, `'recvPacketLoss'`, `'roundTripTime'`, `'availableOutgoingBitrate'`), which is useful for a tooltip or a targeted hint:

```jsx theme={null}
const { networkState, networkStateReasons } = useNetwork();
if (networkState === 'bad' && networkStateReasons.includes('sendPacketLoss')) {
  // Suggest the user turn off their camera to save upload bandwidth.
}
```

<Note>
  The older `quality` (1-100) and `threshold` fields are **deprecated as of 0.23.0**. Use `networkState` and `networkStateReasons` instead.
</Note>

## React to changes

Pass `onNetworkQualityChange` and `onNetworkConnection` to run side effects, such as toast notifications, when the network changes:

```jsx theme={null}
import { useCallback } from 'react';
import { useNetwork } from '@daily-co/daily-react';

useNetwork({
  onNetworkQualityChange: useCallback((event) => {
    if (event.networkState === 'bad') showToast('Your connection is unstable');
  }, []),
});
```

## Detailed stats

For richer diagnostics, `getStats()` returns the latest network statistics (the same data as the daily-js [`getNetworkStats()`](/reference/daily-js/instance-methods/get-network-stats) method):

```jsx theme={null}
const { getStats } = useNetwork();
const stats = await getStats();
```

## Topology

`topology` is `'peer'`, `'sfu'`, or `'none'`, telling you whether the call is peer-to-peer or routed through Daily's SFU. This is informational; it changes automatically as the call scales. See [video architecture](/docs/guides/architecture-and-monitoring/intro-to-video-arch) for what drives it.

## Monitor CPU load

A choppy call is often the device, not the network. [`useCPULoad`](/reference/daily-react/use-cpu-load) reports whether Daily is under CPU pressure and why:

```jsx theme={null}
import { useCPULoad } from '@daily-co/daily-react';

function CPUWarning() {
  const { state, reason } = useCPULoad();
  // state: 'low' | 'high'; reason: 'none' | 'encode' | 'decode' | 'scheduleDuration'
  if (state !== 'high') return null;
  return <p>High CPU load ({reason}). Try closing other apps or lowering video quality.</p>;
}
```

## Adapting to poor conditions

A common pattern: when the network is `'bad'`, reduce what you send or receive. Lower the published quality with [`useSendSettings`](/reference/daily-react/use-send-settings), or reduce what you subscribe to with [`useReceiveSettings`](/reference/daily-react/use-receive-settings):

```jsx theme={null}
import { useEffect } from 'react';
import { useNetwork, useReceiveSettings } from '@daily-co/daily-react';

function AdaptiveQuality() {
  const { networkState } = useNetwork();
  const { updateReceiveSettings } = useReceiveSettings();

  useEffect(() => {
    if (networkState === 'bad') {
      updateReceiveSettings({ base: { video: { layer: 0 } } }); // lowest layer
    }
  }, [networkState, updateReceiveSettings]);

  return null;
}
```

## Next steps

<CardGroup cols={2}>
  <Card title="Rendering media" icon="video" href="/docs/daily-react/docs/rendering-media">
    Render placeholders when video drops.
  </Card>

  <Card title="Video architecture" icon="diagram-project" href="/docs/guides/architecture-and-monitoring/intro-to-video-arch">
    Peer-to-peer vs SFU, and what topology means.
  </Card>
</CardGroup>