Video SDK useRealtimeStore Hook – React Native

The useRealtimeStore hook reads and writes the Realtime Store of a room.
It allows you to set, get, and listen to value changes for a specific key across all participants in a room.

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 Native Hook Example

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

const key = "BLOCKED_STUDENTS";

function onValueChanged(value, updatedBy) {
  console.log("Value updated by:", updatedBy?.displayName, "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 participants in the room and can hold a single string value.

onValueChanged

• Type: (value: string, updatedBy: Participant | 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 receives the latest value and updatedBy, the Participant who wrote it. updatedBy is null once that participant has left. When the key is deleted, value is an empty string.

---

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:
  • The room is not joined yet, or is reconnecting.
  • Payload size exceeds 1 KB per key (ERROR_PAYLOAD_TOO_LARGE).
  • 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> Resolves the stored value, or null when the server answers with no value.

• Rejects with 4046 (FAILED_TO_GET_VALUE) when the key is not set or was cleared, or when the server otherwise refuses the request. The error message gives the reason.
• Rejects if the room is not joined yet or is reconnecting.

Example

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

async function handleGetValue() {
  try {
    const value = await getValue();
    console.log("Fetched value:", value);
  } catch (error) {
    // A key that is not set rejects with 4046 (FAILED_TO_GET_VALUE)
    console.error("Error while getting value:", error.code, error.message);
  }
}

handleGetValue();