Video SDK useRealtimeStore Hook – React

The useRealtimeStore hook provides an easy way to interact with the Realtime Store in Video SDK.
It allows you to set, get, and listen to value changes for a specific key across all participants in a meeting — enabling synchronized state management in real time.

Overview

useRealtimeStore takes a key and an optional configuration object (such as onValueChanged) and returns a set of methods to work with that key inside the Realtime Store.

Example Usage

useRealtimeStore React Hook Example

import { useRealtimeStore } from "@videosdk.live/react-sdk";

const key = "BLOCKED_STUDENTS";

function onValueChanged({ updatedBy, value }) {
  console.log("Value updated by:", updatedBy, "New value:", value);
}

const { setValue, getValue } = useRealtimeStore(key, {
  onValueChanged,
});

---

Parameters

key

• Type: string
• Description: A unique identifier representing the data entry in the Realtime Store. Each key is shared across all meeting participants and can hold a single value (typically a string).

onValueChanged

• Type: (data: { updatedBy: string, value: string | null }) => void
• Optional
• Description: This callback is triggered whenever the value for the specified key is updated in the Realtime Store by any participant. It provides the updatedBy participant identifier and the latest value.

---

Returns

The useRealtimeStore hook returns an object containing the following methods:

{
  setValue: (value: string | null) => Promise<void>,
  getValue: () => Promise<string | null>
}

---

setValue(value)

Sets or updates the value for the specified key in the Realtime Store.

Parameters

• value (string | null)
  The string value to be stored. Pass null to delete the key.

Returns

• Type: Promise<void> Resolves once the value is successfully updated or deleted.

• Throws an error if:
  • Key or value is missing or not of type string.
  • Payload size exceeds 1 KB per key.
  • Session exceeds the 100-key limit.
  • Request fails due to network or internal issues.

Example

const { setValue } = useRealtimeStore("BLOCKED_STUDENTS");

async function handleSetValue() {
  try {
    await setValue("[abcd, efgh]");
    console.log("Value updated successfully");
  } catch (error) {
    console.error("Error while setting value:", error);
  }
}

handleSetValue();

---

getValue()

Retrieves the current value for the specified key from the Realtime Store.

Returns

• Type: Promise<string | null> Returns the stored string value if available, or null if the key doesn’t exist or the retrieval fails.

Example

const { getValue } = useRealtimeStore("BLOCKED_STUDENTS");

async function handleGetValue() {
  try {
    const value = await getValue();
    console.log("Fetched value:", value);
  } catch (error) {
    console.error("Error while getting value:", error);
  }
}

handleGetValue();

---