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

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 an error if the key is missing 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()