usePropsRef

usePropsRef builds the props bridge for a boundary you assemble yourself. It hands back the ref and a ready provider to put in a module's providers array. The semantics are on Props; this page is the API surface.

Signature

usePropsRef<P extends object, T = P>(
    props: P,
    options?: { adapter?: PropsAdapter<P, T>; token?: InjectionToken<PropsRef<T>> }
): { ref: PropsRef<T>; provider: ValueProvider<PropsRef<T>> }

ref is the live view services hold. provider is a useValue binding of that ref under token, or under the PropsRef class when you leave token off.

props

The object the ref exposes. It is read on every render and written into the ref in a layout effect; the timing rules are on PropsRef.

options

• adapter - a pure transform applied inside the ref. Its output is what current returns. Swapping it rebuilds that value from the untouched raw props.
• token - what the bridge registers under, and what gets constructed. A class token is instantiated itself, so a PropsRef subclass hands back an instance of that subclass. A symbol token constructs the base PropsRef.

The ref is constructed once, on the first render, and survives every later render of the same component.

The manual bridge

import { ModuleProvider, usePropsRef } from "@remodulo/react"
import type { ReactNode } from "react"

function OrderBoundary({ orderId, children }: OrderProps & { children?: ReactNode }) {
    // `provider` is the registration to hand the module; `ref` is the live view services read.
    const { provider } = usePropsRef<OrderProps>({ orderId }, { token: OrderPropsRef })

    return <ModuleProvider providers={[provider, OrdersApi, OrderStore]}>{children}</ModuleProvider>
}

OrderBoundary puts provider first in the providers array, so OrdersApi and OrderStore can inject OrderPropsRef while they construct. This is what createModuleComponent does for you - drop to this form when the provider list is conditional, when the boundary needs a second bridge, or when the module is built from something that is not props.

Where to go next

Guides

• Props

Reference

• ModuleProvider
• createModuleComponent
• PropsRef