Realtime Store - React

The Realtime Store allows you to store, update, retrieve, and observe custom key-value data within a meeting — in real time. It acts as a shared data layer across all connected participants, ensuring synchronized states throughout the session.

This is particularly useful for collaborative or stateful meeting experiences such as:

• Pinned messages and flags
• Moderation data (e.g., blocked users)
• Collaborative notes or polls

note

This page uses the following asynchronous methods. Refer to their API reference for the errors each Promise may reject with, and handle these rejections appropriately based on your use case.

• setValue()
• getValue()

useRealtimeStore

To utilize Realtime Store in a meeting, VideoSDK provides a hook called useRealtimeStore. This hook enables you to subscribe to any key and publish to any key, facilitating the exchange of realtime key-value data during the meeting.

---

setValue()

The setValue() method is used to store or update data in the RealtimeStore. If a key already exists, it will be overwritten with the new value. Passing null as the value deletes the key. Since this method throws errors directly, it should be enclosed in a try...catch block to handle exceptions gracefully.

Key Notes

• Supports string values only.
• Each key can store up to 1 KB of data.
• A maximum of 100 keys are allowed per session.
• Deletion is performed by setting the value to null.
• Throws an error if:
  • Key or value is missing or not of type string.
  • The request fails.
  • The session exceeds the 100-key limit.

Example

import { useRealtimeStore } from "@videosdk.live/react-sdk";
const MeetingView = () => {
  //Getting the setValue method from hook
  const { setValue } = useRealtimeStore("Blocked_Students");

  const handleSetValue = async () => {
    try {
      await setValue("[abcd,efgh]");
      console.log("Data set successfully!");
    } catch (error) {
      console.error("Failed to set data:", error);
    }
  };

  return (
    <>
      <button onClick={handleSetValue}>Set Value</button>
    </>
  );
};

---

getValue()

The getValue() method retrieves the current value associated with a given key. Since this method throws errors directly, it should be enclosed in a try...catch block to handle exceptions gracefully.

Key Notes

• Returns the current string value for the given key.
• Useful for fetching shared state when joining a meeting or reloading a view.
• Throws FAILED_TO_GET_VALUE if the key has not been set or if the request fails.

Example

import { useRealtimeStore } from "@videosdk.live/react-sdk";
const MeetingView = () => {
  //Getting the setValue method from hook
  const { getValue } = useRealtimeStore("Blocked_Students");

  const handleGetValue = async () => {
    try {
      const value = await getValue();
    } catch (error) {
      console.error("Failed to get data:", error);
    }
  };

  return (
    <>
      <button onClick={handleGetValue}>Get Value</button>
    </>
  );
};

---

onValueChanged()

The onValueChanged event is emitted whenever a value is changed for the given key in the realtime store. It provides both the value and updatedBy so you can process the value accordingly.

Example

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

const MeetingView = () => {
  //Event to recieve the data
  function onValueChanged({ updatedBy, value }) {
    console.log("onValueChanged", updatedBy, value);
  }

  //Getting the send method from the hook and assigning event callbacks
  const {} = useRealtimeStore("Blocked_Students", {
    onValueChanged,
  });

  return <>...</>;
};

---

⚠️ Error Handling & Constraints

Property	Description
Error Handling	All RealtimeStore methods throw directly; wrap them in try...catch.
Payload Size	Maximum 1 KB per key.
Supported Type	Only string values are supported. Use null to delete key.
Concurrency	The latest write overwrites previous values (last write wins)
Key Limit	A maximum of 100 keys are allowed in a single session.

API Reference

The API references for all the methods utilized in this guide are provided below:

• useRealtimeStore()