Lifecycle Hooks

Lifecycle hooks are defined on the base component class, so they are available on both StatefulComponent and StatelessComponent. Override these methods to hook into the component lifecycle.

Overview

[created] → onBeforeMount() → [DOM rendered] → onMount() → onUnmount() → [destroyed]
                                                              ↑ error ↓
                                                           onError(err)

Usage in StatelessComponent

StatelessComponent also inherits all lifecycle hooks. Use them the same way — no @State required:

@Component()
class Banner extends StatelessComponent<{ text: string }> {
  onMount() {
    console.log('Banner mounted:', this.props.text)
  }

  render() {
    return <div>{this.props.text}</div>
  }
}

onBeforeMount()

Called before the component's DOM is created. The DOM is not yet available.

@Component()
class MyComponent extends StatefulComponent {
  onBeforeMount() {
    // initialize state, fetch initial data, etc.
    this.count = this.initialCount
  }

  render() { return <div>{() => this.count}</div> }
}

onMount()

Called after the component is inserted into the DOM. Use this to access DOM elements, start timers, or subscribe to external events.

@Component()
class Timer extends StatefulComponent {
  @State() elapsed = 0
  private interval?: ReturnType<typeof setInterval>

  onMount() {
    this.interval = setInterval(() => this.elapsed++, 1000)
  }

  onUnmount() {
    clearInterval(this.interval)
  }

  render() {
    return <p>{() => this.elapsed}s</p>
  }
}

onUnmount()

Called when the component is removed from the DOM. Clean up timers, subscriptions, and event listeners here.

onUnmount() {
  clearInterval(this.interval)
  window.removeEventListener('resize', this.onResize)
}

onError(error)

Called when an error is thrown inside the component or its children. Use it to display error states without crashing the whole tree.

@Component()
class SafeLoader extends StatefulComponent {
  @State() error: Error | null = null

  onError(err: Error) {
    this.error = err
    console.error('Component error:', err)
  }

  render() {
    return () => this.error
      ? <p>Something went wrong: {() => this.error!.message}</p>
      : <DataView />
  }
}

Combining with @Watch

Watchers run after mount automatically. Use onMount when you need to access the DOM:

@Component()
class AutoFocus extends StatefulComponent {
  input = createRef<HTMLInputElement>()

  onMount() {
    this.input.el?.focus()
  }

  render() {
    return <input ref={this.input} />
  }
}