useNodeState(spec, args) returns the ready node instance plus its live lifecycle. It has the same readiness behavior as useNode and adds the node’s operation state. Use it to show a refresh spinner over the current value, or to mark data stale while it reloads.

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

const ProfilePanel = observer(({ userId }: { userId: string }) => {
  const state = FrondReact.useNodeState(ProfileNode, { userId });

  return (
    <div>
      <h1>{state.node.displayName}</h1>
      {state.busy && <Spinner />}
    </div>
  );
});

Wrap the component in observer when it renders state.node fields, getters, or result-backed data. You do not need observer for components that only read lifecycle metadata such as state.busy, state.operation, state.operationFailure, or state.nodeId; those update through the hook subscription.

Returns

Field	Type	Description
`node`	node instance	The ready node.
`nodeId`	`NodeId`	The graph node id.
`operation`	`NodeOperation`	`{ _tag: "Idle" }` or `{ _tag: "Running", kind }` where `kind` is `"action"`, `"refresh"`, or `"args"`.
`busy`	`boolean`	`true` while an operation is running.
`operationFailure`	`NodeOperationFailure \| undefined`	The last operation failure, if any.
`resultValidity`	`DisplayableResultValidity`	`{ _tag: "Current" \| "Stale" }`.

Same readiness behavior as useNode

useNodeState suspends until the node is ready and throws readiness failures to the nearest error boundary, exactly like useNode — in fact useNode returns useNodeState(...).node. When the hook returns, state.node is always a ready node. See Suspense and errors.

It adds the lifecycle that happens after readiness. A background operation — a refresh or an action — runs against the already-ready node without suspending. useNodeState exposes it through operation and busy, which useNode does not return:

{state.busy && <Spinner />}
{state.resultValidity._tag === "Stale" && <StaleBadge />}

Expired data is not background work and is not exposed as ready render data. The hook schedules readiness, suspends, and reloads. See Result validity.

When to use which

Hook	Returns	Use for
`useNode`	the ready node	The common read.
`useNodeState`	node + operation/busy/validity	Reflecting refreshes, actions, or stale data in the UI.

Next: useNodeControls — refresh, evict, and release without reading the result.