# useSnapshot

Hook to subscribe to a State container's current value

## Import

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

`useSnapshot` subscribes to a `State` container and returns its current value, re-rendering when the value changes. It has two overloads:

**Full state** – returns the entire state object.

```tsx
function Display({ state }) {
  const value = useSnapshot(state);
  return <span>{value.count}</span>;
}
```

**With selector** – returns a derived value from the state, re-rendering only when the selected value changes. Pass a custom comparator as the third argument when needed.

```tsx
function Count({ state }) {
  const count = useSnapshot(state, (s) => s.count);
  return <span>{count}</span>;
}
```

### State containers vs stores

A `State` container is a reactive primitive that holds an object value and notifies subscribers on change. Stores are built on top of `State` containers but add features, actions, and lifecycle.

| Hook | Input | Subscribes to |
| --- | --- | --- |
| `useSnapshot` | `State<T>` | Raw state container |
| [`useStore`](https://videojs.org/docs/framework/react/reference/api/use-store) | Store instance | Store-backed state with features |

Use `useSnapshot` when working with standalone `State` containers outside the player store system – for example, custom state in component libraries. For player state, use [`usePlayer`](https://videojs.org/docs/framework/react/reference/api/use-player) or [`useStore`](https://videojs.org/docs/framework/react/reference/api/use-store).

`useSnapshot` is built on [`useSelector`](https://videojs.org/docs/framework/react/reference/api/use-selector) and uses `shallowEqual` by default. The HTML equivalent is `SnapshotController`.

## API Reference

### Without Selector

`useSnapshot<T extends object>(state): T`

#### Parameters

| Parameter | Type | Default |
| --- | --- | --- |
| `state` (required) | `{ current: Readonly<T>; subscribe(callback: (() => void), options?: SubscribeOptions): (() => void) }` | — |

#### Return Value

`T`

### With Selector

`useSnapshot<T extends object, R>(state, selector, isEqual?): R`

Select a value from state. Re-renders when the selected value changes.

#### Parameters

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `state` (required) | `{ current: Readonly<T>; subscribe(callback: (() => void), options?: SubscribeOptions): (() => void) }` | — | |
| `selector` (required) | `{ (state: T): R; displayName?: string }` | — | Derives a value from state. |
| `isEqual` | `((a: R, b: R) => boolean)` | — | 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