m.route handler execution and component lifecycle synchronization

Question

Route Handler Behavior
Mithril.js utilizes a client-side router that maps URL patterns to handler functions. When navigating between routes that resolve to the same component but with different URL parameters, the router triggers a redraw to synchronize the DOM with the current route state.

Lifecycle Constraints
Because the routing system is decoupled from the component hierarchy, a component that remains mounted during a route change does not automatically trigger its oninit hook. This creates a gap when logic tied to the component's initialization must be re-executed based on new route parameters.

While route handlers can execute logic before rendering, managing the transition of state between the router's internal event system and the existing component instance requires a specific coordination strategy.

How can a component be notified to refresh its internal state when a route parameter changes without unmounting the component?
What is the recommended pattern for synchronizing route-driven data fetching with the Mithril redraw cycle for persistent components?

Wasi · Answer

Synchronizing Components with Route Changes
In Mithril.js, the router operates independently of the component lifecycle. When a URL change maps to the same component with different parameters (e.g., /user/1 to /user/2), Mithril does not unmount and remount the component. Consequently, oninit and create hooks do not fire again, leaving the component in a stale state.

To refresh internal state without a full re-mount, you must shift logic from initialization-based hooks to reactive-based or lifecycle-continuous hooks.

Recommended Pattern: The onupdate Hook
The most effective way to handle persistent components is to use the onupdate hook. Since onupdate is called after every redraw—including those triggered by route changes—it is the ideal place to detect changes in the route state.

Capture the previous route parameters in the component's state.
  In onupdate, compare the current m.route() with the stored value.
  Trigger data fetching or state updates if they differ.

Alternative: Route Handler Logic
If you prefer to keep logic out of the component, you can use the callback function within the m.route configuration. This allows you to execute side effects globally before the redraw cycle even begins.

m.route({
  "/user/:id": function(params, route) {
    // This global logic runs before the component redraws
    console.log("Navigating to user", params.id);
    return UserProfile;
  }
});;

Assumptions and Uncertainty
This solution assumes you are using the standard m.route module. If you are using a third-party routing wrapper or a custom implementation, the timing of the redraw cycle may vary. Additionally, onupdate fires frequently; ensure your comparison logic (if !==) is strict to avoid infinite redraw loops or redundant API calls.

m.route handler execution and component lifecycle synchronization

Route Handler Behavior

Lifecycle Constraints

1 answer

Synchronizing Components with Route Changes

Recommended Pattern: The onupdate Hook

Alternative: Route Handler Logic

Assumptions and Uncertainty

Your perspective belongs here.

1 question comment

Using vnode.state to track route changes in onupdate