Provider

FrondProvider puts a runtime on React context. Every Frond hook below it reads from that runtime. Mount one at the root of your app.

import * as FrondReact from "@frondruntime/react";
import { runtime } from "./runtime";

export function App() {
  return (
    <FrondReact.FrondProvider runtime={runtime}>
      <Routes />
    </FrondReact.FrondProvider>
  );
}

Prop	Type	Description
runtime	Runtime	The runtime created with Frond.createRuntime().
children	ReactNode	The subtree that can use Frond hooks.

Runtime identity

Frond does not require this, but we recommend creating the runtime outside the React tree and importing that stable instance. Holding the runtime in React state, useMemo, or useRef ties graph identity to a component lifetime. If React unmounts that provider subtree, remounts it, or recreates the memoized value, the app gets a new runtime and every node, pending acquire, live resource, and cached result in the old graph is gone.

Avoid creating the main app runtime inside the provider component:

function App() {
  const [runtime] = useState(() => Frond.createRuntime());

  return (
    <FrondReact.FrondProvider runtime={runtime}>
      <Routes />
    </FrondReact.FrondProvider>
  );
}

Prefer a module-level runtime for the main app graph:

// runtime.ts
export const runtime = Frond.createRuntime();

Use a component-owned runtime only when you intentionally want an isolated, disposable graph.

Reaching the runtime

Two hooks read the provider:

const runtime = FrondReact.useRuntime();       // the Runtime
const client = FrondReact.useRuntimeClient();  // runtime.client

useRuntime returns the runtime; useRuntimeClient returns runtime.client directly. Use them for imperative work — acquiring a node handle, dispatching an action outside a render path. For reading a node into a component, use useNode or useNodeState instead.

A hook used outside a provider throws FrondReactUsageError. The provider is required.

Nested providers

The provider is a single React context. Nesting a second FrondProvider overrides the runtime for that subtree.

<FrondReact.FrondProvider runtime={appRuntime}>
  <App />
  <FrondReact.FrondProvider runtime={sandboxRuntime}>
    <Sandbox />
  </FrondReact.FrondProvider>
</FrondReact.FrondProvider>

Hooks inside <Sandbox /> read sandboxRuntime; everything else reads appRuntime. Most apps use one runtime and one provider — nesting is for isolated subtrees like a preview pane or a test harness.

---

Next: useNode — read a node with Suspense.