Skip to content

useModuleRebuild

useModuleRebuild returns the nearest module's rebuild function. Calling it destroys that module and builds a new one under the same parent. The semantics are on Modules; this page is the API surface.

Signature

ts
useModuleRebuild(): () => void
tsx
import { useModuleRebuild } from "@remodulo/react"

function DiscardOrderDraft() {
    const rebuild = useModuleRebuild()

    return (
        <button type="button" onClick={rebuild}>
            Discard local changes
        </button>
    )
}

rebuild takes no arguments and returns nothing. Clicking DiscardOrderDraft replaces the module the button lives in, so every instance that module owns is destroyed and constructed again.

What it does

Destroys this module and builds a new one under the same parent: new instances throughout. Everything the old module owned is unmounted and destroyed on the way out, children first.

It is scheduled on a layout effect, not run where you call it. A rebuild triggered from an event handler happens on the next commit, not in the middle of one. Several calls in one commit build one module.

The returned function keeps its identity for the life of the boundary component. It is safe in a dependency array or on a memoized child.

Prefer deps when there is a value

deps states the reason for the rebuild in code, next to the boundary. It lives in ModuleProvider's props and in createModuleComponent's config. Reach for this hook when the reason is not a value you can put there: a "discard local changes" button, a reset after a re-login.

Under a bare App it is a no-op

AppProvider supplies a rebuild that does nothing, so a component whose nearest module is the App gets a function with no effect. A fresh root means a fresh App handed to a fresh AppProvider - handing a different instance to a live one throws.

Where to go next

Guides

Reference

MIT licensed.