Skip to content

useModule

useModule returns the nearest Module from context. Use it when a component needs the scope itself rather than something in it - a debug bar, a diagnostic, a devtools panel. The full member list is on App & Module.

Signature

ts
useModule(): Module
tsx
import { useModule } from "@remodulo/react"

function OrdersDebugBar() {
    const orders = useModule()

    return (
        <footer>
            {orders.id} · {orders.status} · {orders.traversal.ancestors().length} above
        </footer>
    )
}

orders is the module the nearest boundary built. id, status, parent, children, resolver and traversal are all readable off it.

It is a shortcut for useModuleContext().module, so outside a boundary it throws the message every module hook shares:

useModuleContext: no module in context. Wrap with <AppProvider> or <ModuleProvider>.

The object is the current module, not a stable handle. A rebuild destroys it and builds a new one, so the next render returns a different Module with different instances inside it.

Where to go next

Guides

Reference

MIT licensed.