Skip to content

useModuleContext

useModuleContext returns the whole module context value: the nearest module and its rebuild. Every other module hook is a shortcut into it. Reach for it when you need both halves at once; otherwise the narrower hook says more about the call site.

Signature

ts
useModuleContext(): ModuleContextValue
ts
type ModuleContextValue = {
    module: Module
    rebuild: () => void
}
tsx
import { useModuleContext } from "@remodulo/react"

function OrdersResetButton() {
    // Both halves at once: the module to read, and the rebuild to act on it.
    const { module, rebuild } = useModuleContext()

    return (
        <button type="button" onClick={rebuild}>
            Reset {module.id}
        </button>
    )
}

module is the nearest Module - the same one useModule returns. rebuild is the same function useModuleRebuild returns.

It throws outside a module

useModule, useResolver, useModuleRebuild and every resolution hook read this context, so all of them fail the same way outside a boundary:

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

The fix is a module above the component - an AppProvider at the root, or a ModuleProvider (or a createModuleComponent result) at the boundary.

Identity

The value is memoized on module and rebuild. It changes when the module is rebuilt and not otherwise. rebuild keeps its identity for the life of the boundary component, so it is safe in a dependency array or on a memoized child.

Where to go next

Guides

Reference

MIT licensed.