Tutorial

In this tutorial, you will build a simple real-time EUR/USD Forex rate example.

Local Setup#

To follow this tutorial, make sure you have a local BigState environment running. You can start it using the local setup guide (link).

The example will not work until BigState services are running locally.

This example demonstrates how to use useBigState inside a React component to subscribe to state updates and visualize them in real time. The component subscribes to a specific state and receives a notification every time the state changes. When a new update arrives, the component extracts the current state value, transforms it into a format suitable for rendering, and stores it in local React state. The collected values are then passed to a chart component, allowing the UI to update incrementally as new data arrives. To avoid unbounded growth, the example keeps only the most recent values, making it suitable for real-time visualizations such as price charts or live metrics. In this setup, useBigState acts as an event source, while state management and rendering logic are handled entirely within the React component.



import { useEffect, useState } from 'react';
import { useBigState } from 'bigstate.client.react';
import { EurUsdChart } from './components/EurUsdChart';

const FOREX_SID = 'forex:eurusd';
const DELIVERY = 'deliveryWs';

const App = () => {
  const [points, setPoints] = useState([]);

  const { lastChanged } = useBigState(
    [DELIVERY],
    [FOREX_SID],
    {
      baseUrl: 'https://api.bigstate.io',
      apiKey: '3/ig10oZF/1f3kBn7VR0QSgZU0rtWR2oDsQ6WwoYwmRpSPgBRJqfFdDkZrM0VCDwFwi06/O2BY3ip8z3El2+f5AK0hHjuFGf1K8Pah0sKKg7fZshnqVgnyFI3Idyrzxo@1',
    },
    {
      baseUrl: 'https://ws.delivery.bigstate.io',
      apiKey: '3/ig10oZF/1f3kBn7VR0QSgZU0rtWR2oDsQ6WwoYwmRpSPgBRJqfFdDkZrM0VCDwFwi06/O2BY3ip8z3El2+f5AK0hHjuFGf1K8Pah0sKKg7fZshnqVgnyFI3Idyrzxo@1',
    }
  );

  useEffect(() => {
    const currState = lastChanged?.value?.currState;
    if (!currState) return;
    const date = new Date(currState.at);

    const pad = (n) => String(n).padStart(2, '0');

    const timeLabel = `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(
      date.getSeconds()
    )}`;

    setPoints((prev) => {
      const next = [...prev, { time: timeLabel, rate: currState?.value.price }];
      return next.slice(-50);
    });
  }, [lastChanged]);

  return (
    <div className="container">
      <EurUsdChart data={points} />
    </div>
  );
};

export default App;

Simple counter Support

Local Setup
Authentication
Use BigState

Tutorial

Local Setup#

Authentication#

Use BigState#

Using hook useBigState#