Managing Side Effects with Mithril Component Lifecycle Hooks

Use Mithril lifecycle hooks to run code when a component mounts, updates, or unmounts, enabling data fetching, subscriptions, and cleanup without manual DOM manipulation.

Why lifecycle hooks matter

In Mithril, a component is a plain JavaScript object that provides a view method and optional lifecycle hooks. The hooks—oninit, oncreate, onupdate, onbeforeupdate, and onremove—are called automatically by the framework at specific moments in the component’s lifetime. By placing side‑effect logic in these hooks you keep the view pure and avoid manual DOM access.

Example: fetching data and cleaning up

const UserProfile = {
  oninit(vnode) {
    // Store the request promise so we can cancel it later
    vnode.state.request = m.request({
      method: 'GET',
      url: '/api/user/' + vnode.attrs.id,
      deserialize: JSON.parse
    });
    // When the request resolves, update the component state
    vnode.state.request.then(data => {
      vnode.state.user = data;
      m.redraw(); // trigger a redraw because the data changed
    });
  },
  onremove(vnode) {
    // If the request is still pending, abort it to prevent memory leaks
    if (vnode.state.request && typeof vnode.state.request.abort === 'function') {
      vnode.state.request.abort();
    }
  },
  view(vnode) {
    if (!vnode.state.user) {
      return m('div', 'Loading…');
    }
    return m('div', [
      m('h2', vnode.state.user.name),
      m('p', vnode.state.user.email)
    ]);
  }
};

// Mount the component inside a DOM element with id="app"
m.mount(document.getElementById('app'), UserProfile);

How the hooks are invoked

• oninit – runs once before the first DOM creation, ideal for initializing state or starting asynchronous work.
• oncreate – runs after the DOM element has been inserted into the document; safe to interact with the newly created nodes.
• onbeforeupdate – runs before the view is diffed; receives the old and new vnode and can return false to skip the update.
• onupdate – runs after the DOM has been updated; useful for measuring layout or integrating third‑party libraries that depend on the DOM.
• onremove – runs just before the DOM node is removed; the place to cancel timers, abort requests, or detach event listeners.

Limits of the lifecycle API

The hooks are only available for components defined with m.component (the legacy factory) or the ES‑class syntax that Mithril provides (class extends m.Component). A plain view function returned directly by m()—for example m('div', hello)—does not receive lifecycle calls because it is not wrapped as a component instance. If you need lifecycle behavior you must wrap the view in a component object, even if the view itself is simple.

Common mistakes and how to avoid them

1. Forgetting to return the view from oninit – oninit must not return a virtual DOM tree; returning anything other than undefined is ignored and can cause confusion. Keep oninit focused on state setup and let the view method return the markup.
2. Mutating state directly without triggering a redraw – Changing vnode.state inside a hook does not automatically update the UI. Call m.redraw() (or rely on an asynchronous operation that already triggers a redraw, like m.request) after the mutation.
3. Assuming onupdate fires for every attribute change – Mithril skips updates for unchanged children; if you rely on onupdate to run for each prop, you may miss cases where a child component is reused. Use onbeforeupdate to compare specific attrs when you need fine‑grained control.
4. Performing heavy synchronous work in oncreate or onupdate – Blocking the UI thread defeats Mithril’s goal of smooth interactions. Offload expensive calculations to Web Workers or defer them with setTimeout or Promise.resolve().then.
5. Neglecting cleanup in onremove – Subscriptions, timers, or third‑party library instances left active cause memory leaks. Always pair initialization in oninit or oncreate with corresponding teardown in onremove.

Quick verification steps

1. Open a browser console and add a console.log statement at the start of each hook in the example component.
2. Mount the component with m.mount(document.getElementById('app'), UserProfile).
3. Observe the log order: oninit → oncreate → (optional) onupdate on subsequent changes → onremove when you call m.mount(null, root).
4. Modify a prop (e.g., change the user ID) and confirm that onupdate fires, then unmount and verify onremove runs.

By following the pattern shown—initializing asynchronous work in oninit, updating state with m.redraw, and cleaning up in onremove—you can manage side effects safely while keeping your Mithril views declarative and easy to test.