useSnapshot

Import

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.

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.

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.

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.

useSnapshot is built on useSelector and uses shallowEqual by default. The HTML equivalent is SnapshotController.

{ current: Readonly<T>; subscribe(callback: (() => void), options?: SubscribeOptions): (() => void) }

{ current: Readonly<T>; subscribe(callback: (() => void), options?: SubscribeOptions): (() => void) }

((a: R, b: R) => boolean)