Skip to main content
useSnapshot subscribes to a State container and returns its current value, re-rendering the component when the value changes. It is built on useSelector and uses shallowEqual by default.

​
Import

import { useSnapshot } from '@videojs/store/react';
// Also re-exported from @videojs/react

​
Overloads

​
Without selector

Returns the full state object. Re-renders on every state change. 
function useSnapshot<T extends object>(state: State<T>): T

​
With selector

Returns a derived value. Re-renders only when the derived value changes according to isEqual (defaults to shallowEqual). 
function useSnapshot<T extends object, R>(
  state: State<T>,
  selector: (state: T) => R,
  isEqual?: (a: R, b: R) => boolean
): R

​
Parameters

​
state
State<T>
required
The State container to subscribe to. State is a reactive primitive that holds an object value and notifies subscribers on change.
​
selector
(state: T) => R
Optional. Derives a value from the current state. When provided, the component only re-renders when the returned value changes.
​
isEqual
(a: R, b: R) => boolean
Optional. Custom equality comparator used to decide whether the derived value has changed. Defaults to shallowEqual.

​
Return value

​
value
T | R
When called without a selector, the full current state object T. When called with a selector, the derived value R.

​
Usage

​
Full state subscription

CountDisplay.tsx
import { useSnapshot } from '@videojs/store/react';

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

​
Derived value with selector

Use a selector to subscribe to only the part of state you need. The component will not re-render when unrelated parts of the state change.
Count.tsx
import { useSnapshot } from '@videojs/store/react';

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

​
Custom equality comparator

Pass a custom isEqual function when selector returns a derived object and you need control over when re-renders occur.
TimeDisplay.tsx
import { useSnapshot, shallowEqual } from '@videojs/store/react';

function TimeDisplay({ state }) {
  const time = useSnapshot(
    state,
    (s) => ({ current: s.currentTime, duration: s.duration }),
    shallowEqual // explicit, though shallowEqual is the default
  );

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

​
State containers vs. stores

A State container is the low-level reactive primitive in @videojs/store. Stores are built on top of State containers and add features, actions, and lifecycle management.
HookInputSubscribes to
useSnapshotState<T>Raw state container
useStoreStore instanceStore-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 or useStore.

​
HTML equivalent

The HTML equivalent is SnapshotController, which provides the same subscription behavior for DOM-based environments.

Build docs developers (and LLMs) love

Get started for freeTalk to us