useNode(spec, args) acquires a node and returns its ready instance. It suspends until the node is ready and throws to the nearest error boundary if readiness fails. This is the common path: a component that needs a node’s data and renders only when it has it.

import * as FrondReact from "@frondruntime/react";
import { observer } from "mobx-react-lite";
import { ProfileNode } from "./nodes/profile";

const ProfilePanel = observer(({ userId }: { userId: string }) => {
  const profile = FrondReact.useNode(ProfileNode, { userId });
  return <h1>{profile.displayName}</h1>;
});

The component has no loading or error branch. A Suspense boundary above handles loading; an error boundary above handles failure. See Suspense and errors.

Wrap in observer

useNode returns the node instance, whose fields are MobX observables. Wrap the component in observer from mobx-react-lite when it renders node fields, getters, or result-backed data. Without observer, Suspense and error boundaries still work, but the component will not reliably re-render when MobX-backed fields change, and live-resource observation may not register.

Returns

The ready node instance — the class you authored, with its getters, methods, and actions.

const profile = FrondReact.useNode(ProfileNode, { userId });
profile.displayName;             // a getter on the node
await profile.actions.rename({ name: "Ada" }); // a node action

Args and identity

args determine the node id. Two useNode(ProfileNode, { userId: "u_42" }) calls anywhere in the tree resolve to the same node — one fetch, one instance. Change the args and the hook switches to the new node, suspending if that one is not ready yet.

Inline object args are fine. The hook keys on the resolved node id, not the object reference, so { userId } recreated each render does not re-acquire as long as userId is unchanged.

useNode returns only the ready instance. To also see background operations — a refresh spinner over the current value, or a stale badge — use useNodeState, which returns the same node plus its live operation state.

Next: useNodeState — render with the lifecycle in hand.