# Overview

All available React hooks for Bridge data.

The SDK provides React hooks for accessing Bridge data. All hooks take a `bridgeId` parameter and return React Query results.

## Available Hooks

**useBridgeStatus**  
Check bridge online status without WebSocket.  
**useSystemStats**  
Real-time CPU, memory, GPU, disk, and network stats.  
**useSystemInfo**  
Static system information (specs, hostname).  
**useMedia**  
Now playing info and playback controls.  
**useProcesses**  
Running processes with kill/launch controls.  
**usePower**  
Shutdown, restart, sleep, hibernate, Wake-on-LAN.

## Hook Patterns

### WebSocket vs REST

| Hook               | Data Source        | Updates                       |
|--------------------|-------------------|-------------------------------|
| `useBridgeStatus`  | REST (polling)    | Configurable interval         |
| `useSystemStats`   | WebSocket         | Real-time (1s interval)      |
| `useMedia`         | WebSocket         | On change                    |
| `useProcesses`     | WebSocket         | Real-time (3s interval)      |
| `useSystemInfo`    | REST              | Cached (5 min stale)         |
| `usePower`         | REST/UDP          | Mutations only                |

### Common Return Values

All hooks return React Query results:

```
const {
  data, // The data (or null/undefined)
  isLoading, // First load in progress
  isError, // Query failed
  error, // Error object
  refetch, // Manual refetch function
} = useSystemStats(bridgeId);
```

### Connection Awareness

Hooks automatically handle connection state:

```
function Stats({ bridgeId }: { bridgeId: string }) {
  const bridge = useBridge(bridgeId);
  const { data } = useSystemStats(bridgeId);

// Hook is disabled when bridge is not connected
  if (bridge?.status !== "connected") {
    return <div>Not connected</div>;
  }

if (!data) {
    return <div>Waiting for data...</div>;
  }

return <div>CPU: {data.cpu.current_load}%</div>;
}
```

### Optimistic Updates

Mutation hooks support optimistic updates:

```
const { control } = useMedia(bridgeId);

// Volume change is optimistic - UI updates immediately
control.mutate({ action: "set_volume", value: 50 });
```

Custom Storage  
Replace the default localStorage with IndexedDB, SQLite, a REST API, or any custom backend.