Variable: PlayRenderer

Documentation / @xmachines/play-react / PlayRenderer

const PlayRenderer: React.FC<PlayRendererProps>;

Defined in: packages/play-react/src/PlayRenderer.tsx:61

Main renderer component that subscribes to actor signals and renders UI

Architecture (per RESEARCH.md Pattern 1):

• Subscribes to actor.currentView signal via useSignalEffect
• Dynamically renders catalog components based on view.component string
• Forwards user events to actor via actor.send()
• React state only for triggering renders, NOT business logic

Invariant: Actor Authority - Actor decides all state transitions via guards. Invariant: Passive Infrastructure - Component observes signals and sends events. Invariant: Signal-Only Reactivity - Business logic state lives in actor signals.

Example

import { PlayRenderer } from "@xmachines/play-react";
import { definePlayer } from "@xmachines/play-xstate";

const actor = definePlayer({ machine, catalog })();
actor.start();

const components = {
  Dashboard: ({ userId, send }) => <div>User: {userId}</div>,
  LoginForm: ({ error, send }) => <form onSubmit={(e) => {
    e.preventDefault();
    send({ type: "intent", name: "login.submit", payload: {...} });
  }}>...</form>
};

<PlayRenderer actor={actor} components={components} />

Param

Component props

Returns

React element rendering current view from actor

Remarks

Component lookup: Dynamically looks up component from components map using view.component string from actor.currentView signal.

Event forwarding: Injects send function as prop to components. Components call send(event) to forward intents to actor. Actor guards decide validity.

Error handling: If component not found in catalog, logs error and shows fallback. This indicates missing component registration, not runtime error.

CRITICAL: Never call actor.send() during render - only in event handlers. Calling send during render causes infinite render loops.