Initial state

State you want the React app to read on first paint — player name, current level, settings — without an event roundtrip.

InitialState is set on the HUD widget's Class Defaults and is delivered as part of the ue5-bridge-ready handshake. React sees it before its first render.

How it works

• InitialState is a TMap<FString, FString> on the HUD widget.
• Each value must be a JSON-stringified payload ("100", "\"Alice\"", "{\"name\":\"Alice\"}").
• The bridge parses each value back to a JSON-typed JS value before the ready event fires.

BP setup

Open WBP_MyHUD → Class Defaults → InitialState:

WBP_MyHUD → InitialState
  "player"   →  {"name":"Alice","hp":100}
  "level"    →  "Eldermoor"

On the web side

The ready event carries the parsed object:

window.addEventListener('ue5-bridge-ready', (e) => {
  const { initialState } = e.detail;
  initialState.player.name; // "Alice"
  initialState.level;       // "Eldermoor"
});

With the React SDK

useInitialState reads a single key with full type safety:

import { useInitialState } from 'unreal-react-bridge';

function HUD() {
  const player = useInitialState<{ name: string; hp: number }>('player');
  if (!player) return null;
  return <span>{player.name}: {player.hp}</span>;
}

TIP

Use InitialState for read-once boot data. For values that change at runtime, use PushFloat / PushString / etc. from a Sender.

WARNING

InitialState values must be valid JSON strings. "Alice" (no quotes) is invalid; write "\"Alice\"" or rely on BP's Make JSON String helpers.

Reference: useInitialState · BP Widget API.