# useSelector

Low-level hook for subscribing to derived state with customizable equality checks

## Import

```tsx
import { useSelector } from "@videojs/react";
```

`useSelector` is a low-level hook that subscribes to an external store using React’s `useSyncExternalStore`. It accepts a `subscribe` function, a `getSnapshot` function, a `selector` to derive state, and an optional `isEqual` comparator (defaults to `shallowEqual`).

**TimeDisplay.tsx**

```tsx
import { useSelector, shallowEqual } from "@videojs/react";

function TimeDisplay({ store }) {
  const time = useSelector(
    (cb) => store.subscribe(cb),
    () => store.state,
    (state) => ({ current: state.currentTime, duration: state.duration }),
    shallowEqual,
  );

  return (
    <span>
      {time.current} / {time.duration}
    </span>
  );
}
```

### Relationship to useStore and useSnapshot

Both `useStore` and `useSnapshot` are built on `useSelector`:

| Hook | Input | Use case |
| --- | --- | --- |
| [`useStore`](https://videojs.org/docs/framework/react/reference/api/use-store) | Store instance | Player and store access with selector |
| [`useSnapshot`](https://videojs.org/docs/framework/react/reference/api/use-snapshot) | `State` container | Subscribe to raw state changes |
| `useSelector` | Custom subscribe/snapshot | Full control over subscription plumbing |

Prefer [`useStore`](https://videojs.org/docs/framework/react/reference/api/use-store) for store-backed state and [`useSnapshot`](https://videojs.org/docs/framework/react/reference/api/use-snapshot) for `State` containers. Use `useSelector` when you need to integrate with a non-standard external source or customize the equality comparison.

### Equality comparison

The `isEqual` parameter controls when React re-renders. The default `shallowEqual` compares object properties one level deep – sufficient for most selector return values. Pass a custom comparator for deeply nested objects or when you need reference equality (`Object.is`).

## API Reference

`useSelector<S, R>(subscribe, getSnapshot, selector, isEqual?): R`

### Parameters

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `subscribe` (required) | `((cb: (() => void)) => (() => void))` | — | Subscribe function that returns an unsubscribe callback. |
| `getSnapshot` (required) | `(() => S)` | — | Returns the current snapshot value. |
| `selector` (required) | `{ (state: S): R; displayName?: string }` | — | Derives a value from the snapshot. |
| `isEqual` | `((a: R, b: R) => boolean)` | `shallowEqual` | Custom equality function. Defaults to `shallowEqual`. |

### Return Value

`R`

---

React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt