@syncular/react 0.2.0

package/dist/use-sync-status.d.ts

@@ -0,0 +1,29 @@
+/**
+ * `useSyncStatus` — the client's operational status: outbox depth,
+ * upgrading (§7.4.5), leaseState (§7.3.5), schemaFloor (§1.6), and
+ * syncNeeded (§8.4). Status is derived by polling the normalized accessors
+ * after every apply batch (invalidation is the natural "something changed"
+ * signal) plus an initial read; `refresh()` re-reads on demand.
+ *
+ * `online` is not a protocol concept the client exposes directly (§1.3
+ * transport-owned), so it is reported as `undefined` unless a future
+ * accessor lands — the hook surfaces what the core actually knows, never a
+ * guessed value.
+ */
+import type { LeaseState, SchemaFloor } from '@syncular/client';
+export interface SyncStatus {
+    /** Pending outbox commits (unpushed local writes). */
+    readonly outbox: number;
+    /** §7.4.5: a schema-bump reset + first re-bootstrap is in flight. */
+    readonly upgrading: boolean;
+    /** §7.3.5: opaque auth-lease state, or undefined. */
+    readonly leaseState: LeaseState | undefined;
+    /** §1.6: server-declared schema floor (syncing stopped), or undefined. */
+    readonly schemaFloor: SchemaFloor | undefined;
+    /** §8.4: the host loop should run a pull soon. */
+    readonly syncNeeded: boolean;
+    /** True until the first status read resolves. */
+    readonly isLoading: boolean;
+    readonly refresh: () => void;
+}
+export declare function useSyncStatus(): SyncStatus;

package/dist/use-sync-status.js

@@ -0,0 +1,67 @@
+/**
+ * `useSyncStatus` — the client's operational status: outbox depth,
+ * upgrading (§7.4.5), leaseState (§7.3.5), schemaFloor (§1.6), and
+ * syncNeeded (§8.4). Status is derived by polling the normalized accessors
+ * after every apply batch (invalidation is the natural "something changed"
+ * signal) plus an initial read; `refresh()` re-reads on demand.
+ *
+ * `online` is not a protocol concept the client exposes directly (§1.3
+ * transport-owned), so it is reported as `undefined` unless a future
+ * accessor lands — the hook surfaces what the core actually knows, never a
+ * guessed value.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useSyncClient } from './use-client.js';
+const INITIAL = {
+    outbox: 0,
+    upgrading: false,
+    leaseState: undefined,
+    schemaFloor: undefined,
+    syncNeeded: false,
+    isLoading: true,
+};
+export function useSyncStatus() {
+    const client = useSyncClient();
+    const [state, setState] = useState(INITIAL);
+    // `refresh` re-reads through a ref set by the effect (identity-stable, no
+    // tick state — biome-clean deps).
+    const readRef = useRef(() => { });
+    const refresh = useCallback(() => readRef.current(), []);
+    useEffect(() => {
+        let cancelled = false;
+        const read = () => {
+            Promise.all([
+                client.pendingCommits(),
+                client.upgrading(),
+                client.leaseState(),
+                client.schemaFloor(),
+                client.syncNeeded(),
+            ])
+                .then(([pending, upgrading, leaseState, schemaFloor, syncNeeded]) => {
+                if (cancelled)
+                    return;
+                setState({
+                    outbox: pending.length,
+                    upgrading,
+                    leaseState,
+                    schemaFloor,
+                    syncNeeded,
+                    isLoading: false,
+                });
+            })
+                .catch(() => {
+                if (!cancelled)
+                    setState((s) => ({ ...s, isLoading: false }));
+            });
+        };
+        readRef.current = read;
+        read();
+        // Re-read on every apply batch — the "state changed" edge.
+        const unsubscribe = client.onInvalidate(read);
+        return () => {
+            cancelled = true;
+            unsubscribe();
+        };
+    }, [client]);
+    return { ...state, refresh };
+}

package/dist/use-typed-query.d.ts

@@ -0,0 +1,32 @@
+/**
+ * `useTypedQuery` — the typed twin of {@link useSyncQuery}. You write a
+ * Kysely query builder; the hook compiles it to SQL, runs it live against the
+ * client, and extracts its `{tables}` dependency set from the compiled query's
+ * AST automatically — so invalidation is exact (no SQL-text heuristic) and
+ * fully typed by the schema's generated `Database` interface.
+ *
+ * ```ts
+ * const { rows } = useTypedQuery<Database, Pick<TodosRow, 'id' | 'title'>>(
+ *   (db) => db.selectFrom('todos').select(['id', 'title']).where('list_id', '=', listId),
+ *   [listId],
+ * );
+ * ```
+ *
+ * It reuses {@link useSyncQuery}'s invalidation machinery verbatim — the only
+ * additions are compilation and AST-based table extraction. Read-only, like
+ * the dialect: a write builder throws at execution (SPEC §7.1 → use
+ * `useMutation`). `@syncular/kysely` and `kysely` are PEER dependencies of
+ * this package (both are `optional`), so apps that only use `useSyncQuery`
+ * never pull Kysely in.
+ */
+import type { SqlRow } from '@syncular/client';
+import type { Compilable, Kysely } from 'kysely';
+import { type UseSyncQueryOptions, type UseSyncQueryResult } from './use-sync-query.js';
+/**
+ * Build a live typed query. `build` receives a `Kysely<Database>` bound to the
+ * context client and returns any compilable query builder. `deps` re-keys the
+ * builder the same way a `useEffect` dep array does (values the query closes
+ * over, e.g. filter inputs). `options.enabled`/`scopeKeys` pass through; the
+ * `{tables}` set is derived from the compiled query, never guessed.
+ */
+export declare function useTypedQuery<Database, Row = SqlRow>(build: (db: Kysely<Database>) => Compilable<Row>, deps?: readonly unknown[], options?: Omit<UseSyncQueryOptions, 'tables'>): UseSyncQueryResult<Row>;

package/dist/use-typed-query.js

@@ -0,0 +1,44 @@
+/**
+ * `useTypedQuery` — the typed twin of {@link useSyncQuery}. You write a
+ * Kysely query builder; the hook compiles it to SQL, runs it live against the
+ * client, and extracts its `{tables}` dependency set from the compiled query's
+ * AST automatically — so invalidation is exact (no SQL-text heuristic) and
+ * fully typed by the schema's generated `Database` interface.
+ *
+ * ```ts
+ * const { rows } = useTypedQuery<Database, Pick<TodosRow, 'id' | 'title'>>(
+ *   (db) => db.selectFrom('todos').select(['id', 'title']).where('list_id', '=', listId),
+ *   [listId],
+ * );
+ * ```
+ *
+ * It reuses {@link useSyncQuery}'s invalidation machinery verbatim — the only
+ * additions are compilation and AST-based table extraction. Read-only, like
+ * the dialect: a write builder throws at execution (SPEC §7.1 → use
+ * `useMutation`). `@syncular/kysely` and `kysely` are PEER dependencies of
+ * this package (both are `optional`), so apps that only use `useSyncQuery`
+ * never pull Kysely in.
+ */
+import { createSyncularKysely, extractTables } from '@syncular/kysely';
+import { useMemo } from 'react';
+import { useSyncClient } from './use-client.js';
+import { useSyncQuery, } from './use-sync-query.js';
+/**
+ * Build a live typed query. `build` receives a `Kysely<Database>` bound to the
+ * context client and returns any compilable query builder. `deps` re-keys the
+ * builder the same way a `useEffect` dep array does (values the query closes
+ * over, e.g. filter inputs). `options.enabled`/`scopeKeys` pass through; the
+ * `{tables}` set is derived from the compiled query, never guessed.
+ */
+export function useTypedQuery(build, deps = [], options) {
+    const client = useSyncClient();
+    // One Kysely instance per client identity — the dialect drives the same
+    // normalized `query` surface the other hooks use, so every host works.
+    const db = useMemo(() => createSyncularKysely(client), [client]);
+    // Compile on the deps the caller declared. The compiled query yields SQL +
+    // parameters (for execution) and its AST (for exact table extraction).
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `deps` is the caller-declared re-key, `build`/`db` are stable-by-design
+    const compiled = useMemo(() => build(db).compile(), [db, ...deps]);
+    const tables = useMemo(() => extractTables(compiled), [compiled]);
+    return useSyncQuery(compiled.sql, compiled.parameters, { ...options, tables });
+}

package/dist/use-window.d.ts

@@ -0,0 +1,27 @@
+/**
+ * `useWindow(base)` — the windowed-sync surface for a component
+ * (SPEC.md §4.8 / DESIGN-eviction.md W1, I3). It manages the live window
+ * units for a base and exposes the **completeness oracle**: which scope
+ * values are held locally in full, so a consumer can render "this data may
+ * be partial" honestly instead of silently serving a partial replica as
+ * complete.
+ *
+ * - `setWindow(units)` swaps the live set (added units bootstrap via the
+ *   image lane; removed units are evicted, fused with unsubscription).
+ * - `units` is the current windowed-in set (re-read on mount and whenever
+ *   the base's table is invalidated — so a deferred eviction draining, or
+ *   a re-entry bootstrapping, updates the verdict).
+ * - `isComplete(unit)` is the per-value verdict: a live query whose scope
+ *   footprint includes a non-`isComplete` unit is a **window miss** — widen
+ *   or show partial, never claim complete.
+ */
+import type { WindowBase } from '@syncular/client';
+export interface UseWindowResult {
+    /** The scope values currently windowed-in for this base. */
+    readonly units: readonly string[];
+    /** Set the live units (widen/shrink diff, §4.8). */
+    readonly setWindow: (units: readonly string[]) => Promise<void>;
+    /** True iff `unit` is windowed-in (answerable in full locally, I3). */
+    readonly isComplete: (unit: string) => boolean;
+}
+export declare function useWindow(base: WindowBase): UseWindowResult;

package/dist/use-window.js

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useSyncClient } from './use-client.js';
+export function useWindow(base) {
+    const client = useSyncClient();
+    const [units, setUnits] = useState([]);
+    // A stable key so the effects re-run only when the base identity changes,
+    // not on every render's fresh object. The latest `base` is read via a ref
+    // inside the closures (the useSyncQuery pattern), so the dep list stays on
+    // primitive keys.
+    const baseKey = `${base.table} ${base.variable} ${JSON.stringify(base.fixedScopes ?? {})} ${base.params ?? ''}`;
+    const baseRef = useRef(base);
+    baseRef.current = base;
+    // `baseKey` re-keys the effect without being read in the body (biome cannot
+    // see the ref indirection) — the dep list is pinned deliberately.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: baseKey re-keys the effect for a fresh base object
+    useEffect(() => {
+        let cancelled = false;
+        const read = () => {
+            Promise.resolve(client.windowState(baseRef.current))
+                .then((state) => {
+                if (!cancelled)
+                    setUnits(state.units);
+            })
+                .catch(() => {
+                /* transient — the next invalidation re-reads */
+            });
+        };
+        read();
+        // Re-read when the base's table changes locally: a deferred eviction
+        // (E1) completing or a re-entry bootstrapping both invalidate it.
+        const unsubscribe = client.onInvalidate((event) => {
+            if (event.tables.has(baseRef.current.table))
+                read();
+        });
+        return () => {
+            cancelled = true;
+            unsubscribe();
+        };
+    }, [client, baseKey]);
+    const setWindow = useCallback((next) => {
+        const result = Promise.resolve(client.setWindow(baseRef.current, next));
+        // Optimistically reflect the new set; the invalidation-driven re-read
+        // reconciles against the registry (e.g. a pinned unit lingering).
+        setUnits(next);
+        return result;
+    }, [client]);
+    const isComplete = useCallback((unit) => units.includes(unit), [units]);
+    return { units, setWindow, isComplete };
+}

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@syncular/react",
+  "version": "0.2.0",
+  "description": "React hooks for Syncular offline-first sync",
+  "license": "Apache-2.0",
+  "author": "Benjamin Kniffler",
+  "homepage": "https://syncular.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/syncular/syncular.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/syncular/syncular/issues"
+  },
+  "keywords": [
+    "sync",
+    "offline-first",
+    "realtime",
+    "database",
+    "typescript"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "browser": "./src/index.ts",
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./typed": {
+      "bun": "./src/typed.ts",
+      "browser": "./src/typed.ts",
+      "import": {
+        "types": "./dist/typed.d.ts",
+        "default": "./dist/typed.js"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!dist/**/*.test.js",
+    "!dist/**/*.test.d.ts"
+  ],
+  "scripts": {
+    "test": "bun test --preload ./test/setup.ts"
+  },
+  "dependencies": {
+    "@syncular/client": "0.2.0"
+  },
+  "peerDependencies": {
+    "@syncular/kysely": "0.2.0",
+    "kysely": ">=0.27.0",
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@syncular/kysely": {
+      "optional": true
+    },
+    "kysely": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^15.11.0",
+    "@syncular/core": "0.2.0",
+    "@syncular/kysely": "0.2.0",
+    "@syncular/server": "0.2.0",
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^18.3.0",
+    "kysely": "^0.29.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
+}

package/src/client.ts

@@ -0,0 +1,130 @@
+/**
+ * The ONE client interface the React bindings target. Both the direct
+ * `SyncClient` (constructed on the current thread) and the worker-mode
+ * `SyncClientHandle` (a promise proxy over the OPFS worker) satisfy it —
+ * their public surfaces diverge (getters vs methods, sync vs promise), so
+ * this module normalizes both into a single async-friendly facade the hooks
+ * consume. That is the "one interface across direct and worker-handle modes"
+ * the invalidation seam (TODO 3.1) was standardized to enable.
+ *
+ * The normalizer resolves each accessor at call time (function → call it,
+ * value → read it) and wraps every result in `Promise.resolve`, so a hook
+ * never has to care which core it holds.
+ */
+import type {
+  ConflictRecord,
+  InvalidationListener,
+  LeaseState,
+  MutationInput,
+  PresencePeer,
+  RejectionRecord,
+  SchemaFloor,
+  SqlRow,
+  SqlValue,
+  WindowBase,
+  WindowState,
+} from '@syncular/client';
+
+/**
+ * The structural union of `SyncClient` and `SyncClientHandle`. Members that
+ * diverge are typed as "value or method, sync or promise"; {@link normalizeClient}
+ * collapses the divergence. Only what the hooks use is listed — the bindings
+ * never reach past this surface.
+ */
+export interface SyncClientLike {
+  onInvalidate(listener: InvalidationListener): () => void;
+  onPresence(listener: (scopeKey: string) => void): () => void;
+  query(
+    sql: string,
+    params?: readonly SqlValue[],
+  ): SqlRow[] | Promise<SqlRow[]>;
+  mutate(mutations: readonly MutationInput[]): string | Promise<string>;
+  conflicts:
+    | readonly ConflictRecord[]
+    | (() => readonly ConflictRecord[] | Promise<readonly ConflictRecord[]>);
+  rejections:
+    | readonly RejectionRecord[]
+    | (() => readonly RejectionRecord[] | Promise<readonly RejectionRecord[]>);
+  schemaFloor:
+    | SchemaFloor
+    | undefined
+    | (() => SchemaFloor | undefined | Promise<SchemaFloor | undefined>);
+  leaseState:
+    | LeaseState
+    | undefined
+    | (() => LeaseState | undefined | Promise<LeaseState | undefined>);
+  upgrading: boolean | (() => boolean | Promise<boolean>);
+  syncNeeded: boolean | (() => boolean | Promise<boolean>);
+  pendingCommits: () => unknown[] | Promise<unknown[]>;
+  presence(
+    scopeKey: string,
+  ): readonly PresencePeer[] | Promise<readonly PresencePeer[]>;
+  setPresence(
+    scopeKey: string,
+    doc: Record<string, unknown> | null,
+  ): void | Promise<void>;
+  /** §4.8 windowed subscriptions: set the live units for a window base. */
+  setWindow(base: WindowBase, units: readonly string[]): void | Promise<void>;
+  /** §4.8 completeness oracle (I3): the windowed-in units for a base. */
+  windowState(base: WindowBase): WindowState | Promise<WindowState>;
+}
+
+/**
+ * Read a member by key that is EITHER a value getter (SyncClient) or a
+ * method returning a value/promise (SyncClientHandle). Read from the client
+ * so a method keeps its `this` binding; if the read is a function, call it.
+ */
+function resolveMember<T>(
+  client: SyncClientLike,
+  key: keyof SyncClientLike,
+): Promise<T> {
+  const member = client[key] as unknown;
+  const value =
+    typeof member === 'function'
+      ? (member as (this: SyncClientLike) => T | Promise<T>).call(client)
+      : (member as T);
+  return Promise.resolve(value as T);
+}
+
+/** The uniform async facade the hooks actually call. */
+export interface NormalizedClient {
+  onInvalidate(listener: InvalidationListener): () => void;
+  onPresence(listener: (scopeKey: string) => void): () => void;
+  query(sql: string, params?: readonly SqlValue[]): Promise<SqlRow[]>;
+  mutate(mutations: readonly MutationInput[]): Promise<string>;
+  conflicts(): Promise<readonly ConflictRecord[]>;
+  rejections(): Promise<readonly RejectionRecord[]>;
+  schemaFloor(): Promise<SchemaFloor | undefined>;
+  leaseState(): Promise<LeaseState | undefined>;
+  upgrading(): Promise<boolean>;
+  syncNeeded(): Promise<boolean>;
+  pendingCommits(): Promise<unknown[]>;
+  presence(scopeKey: string): Promise<readonly PresencePeer[]>;
+  setPresence(
+    scopeKey: string,
+    doc: Record<string, unknown> | null,
+  ): Promise<void>;
+  setWindow(base: WindowBase, units: readonly string[]): Promise<void>;
+  windowState(base: WindowBase): Promise<WindowState>;
+}
+
+export function normalizeClient(client: SyncClientLike): NormalizedClient {
+  return {
+    onInvalidate: (listener) => client.onInvalidate(listener),
+    onPresence: (listener) => client.onPresence(listener),
+    query: (sql, params) => Promise.resolve(client.query(sql, params)),
+    mutate: (mutations) => Promise.resolve(client.mutate(mutations)),
+    conflicts: () => resolveMember(client, 'conflicts'),
+    rejections: () => resolveMember(client, 'rejections'),
+    schemaFloor: () => resolveMember(client, 'schemaFloor'),
+    leaseState: () => resolveMember(client, 'leaseState'),
+    upgrading: () => resolveMember(client, 'upgrading'),
+    syncNeeded: () => resolveMember(client, 'syncNeeded'),
+    pendingCommits: () => resolveMember(client, 'pendingCommits'),
+    presence: (scopeKey) => Promise.resolve(client.presence(scopeKey)),
+    setPresence: (scopeKey, doc) =>
+      Promise.resolve(client.setPresence(scopeKey, doc)),
+    setWindow: (base, units) => Promise.resolve(client.setWindow(base, units)),
+    windowState: (base) => Promise.resolve(client.windowState(base)),
+  };
+}

package/src/index.ts

@@ -0,0 +1,38 @@
+/**
+ * @syncular/react — React bindings with fine-grained live queries
+ * (TODO 3.1 / DESIGN-eviction I1–I4). Works against BOTH `SyncClient`
+ * (direct) and `SyncClientHandle` (worker) through one normalized client
+ * interface. React 18+ (react is a peer dependency); no other runtime deps.
+ *
+ * See README.md for the invalidation granularity truth and the `tables`
+ * option.
+ */
+export type {
+  NormalizedClient,
+  SyncClientLike,
+} from './client';
+// `normalizeClient` is the runtime facade the hooks consume; exported so
+// alternate hosts (e.g. `@syncular/tauri`) can assert shape-parity against
+// the exact normalizer the bindings use.
+export { normalizeClient } from './client';
+export { inferTables } from './infer-tables';
+export { SyncContext, SyncProvider, type SyncProviderProps } from './provider';
+export { useSyncClient } from './use-client';
+export { type UseConflictsResult, useConflicts } from './use-conflicts';
+export { type UseMutationResult, useMutation } from './use-mutation';
+export {
+  type NamedQueryDescriptor,
+  useNamedQuery,
+} from './use-named-query';
+export { usePresence } from './use-presence';
+export {
+  type UseSyncQueryOptions,
+  type UseSyncQueryResult,
+  useSyncQuery,
+} from './use-sync-query';
+export { type SyncStatus, useSyncStatus } from './use-sync-status';
+export { type UseWindowResult, useWindow } from './use-window';
+// NOTE: `useTypedQuery` is intentionally NOT re-exported here — it needs the
+// `@syncular/kysely` + `kysely` peers. It lives behind the `./typed`
+// subpath so apps using only `useSyncQuery` never pull Kysely into their
+// bundle. Import it as `@syncular/react/typed`.

package/src/infer-tables.ts

@@ -0,0 +1,35 @@
+/**
+ * Conservative table inference for `useSyncQuery` (TODO 3.1: "infer
+ * conservatively from the SQL text's table names … documented as a
+ * heuristic with the explicit option as the escape hatch").
+ *
+ * This is a SIMPLE identifier scan, NOT a SQL parser. It collects the
+ * identifiers that follow `FROM` and `JOIN` — the tables a SELECT reads.
+ * It is deliberately over-inclusive at the edges (a table aliased in a CTE,
+ * a function-table, an odd quoting style) because the failure mode of
+ * over-inclusion is a harmless extra re-run, whereas under-inclusion is a
+ * stale query — the one thing live queries must never do. When a query's
+ * real dependencies cannot be read off its text (dynamic SQL, views,
+ * unusual syntax), pass the explicit `tables` option; that always wins.
+ */
+
+const FROM_JOIN_RE =
+  /\b(?:from|join)\s+(?:"([^"]+)"|`([^`]+)`|\[([^\]]+)\]|([a-zA-Z_][a-zA-Z0-9_$]*))/gi;
+
+/**
+ * Extract the table names a SELECT reads. Returns a de-duplicated,
+ * lower-nothing set (identifiers are compared to invalidation table names
+ * as-is — SQLite table names are case-sensitive for our generated schema).
+ */
+export function inferTables(sql: string): Set<string> {
+  const tables = new Set<string>();
+  // Strip a leading schema qualifier (`main.tasks` → `tasks`) so the name
+  // matches the invalidation event's bare table name.
+  for (const match of sql.matchAll(FROM_JOIN_RE)) {
+    const raw = match[1] ?? match[2] ?? match[3] ?? match[4];
+    if (raw === undefined) continue;
+    const dot = raw.lastIndexOf('.');
+    tables.add(dot === -1 ? raw : raw.slice(dot + 1));
+  }
+  return tables;
+}

package/src/provider.ts

@@ -0,0 +1,36 @@
+/**
+ * `SyncProvider` — supplies a `SyncClient` or `SyncClientHandle` to the
+ * hook tree through React context. One provider per client; the hooks read
+ * the normalized facade. Written with `createElement` (no JSX) so the whole
+ * package typechecks under the repo's `.ts`-only root tsconfig with no jsx
+ * setting — the bindings are plain function components either way.
+ */
+import { createContext, createElement, type ReactNode, useMemo } from 'react';
+import {
+  type NormalizedClient,
+  normalizeClient,
+  type SyncClientLike,
+} from './client';
+
+export const SyncContext = createContext<NormalizedClient | undefined>(
+  undefined,
+);
+
+export interface SyncProviderProps {
+  /** A `SyncClient` (direct) or `SyncClientHandle` (worker) — both satisfy it. */
+  readonly client: SyncClientLike;
+  readonly children?: ReactNode;
+}
+
+export function SyncProvider(props: SyncProviderProps): ReactNode {
+  // Re-normalize only when the client identity changes.
+  const normalized = useMemo(
+    () => normalizeClient(props.client),
+    [props.client],
+  );
+  return createElement(
+    SyncContext.Provider,
+    { value: normalized },
+    props.children,
+  );
+}