Lifecycle hooks

What are lifeycle hooks

Lifecycle hooks are key moments in the life of a component. This framework exposes some basics hooks which can be extended with decorators.

Hook	Timing
mounted	Executed when the component is mounted by a parent or via the instance $mount method.
destroyed	Executed when the component is destroyed by a parent or via the instance $destroy method.
updated	Executed when the component is updated by a parent or via the instance $update method.
terminated	Executed when the instance $terminate method is called.

The lifecycle hooks diagram below present in greater detail how theses hooks works with one another.

Using lifecycle hooks

To use a lifecycle hook, declare it as a method of your class, the method will be executed by the internals of the framework at the right time.

import { Base } from '@studiometa/js-toolkit';

export default class Component extends Base {
  static config = {
    name: 'Component',
    log: true,
  };

  mounted() {
    this.$log('mounted');
  }

  updated() {
    this.$log('updated');
  }

  destroyed() {
    this.$log('destroyed');
  }

  terminated() {
    this.$log('terminated');
  }
}

TIP

Find details for the lifecycle hooks APIs in the Lifecycle hooks section in the API Reference.

When extending an existing component, do not forget to call the parent component hook methods via the super keyword:

import Parent from './Parent.js';

export default class Child extends Parent {
  static config = {
    name: 'Child',
  };

  mounted() {
    super.mounted(); // call the parent method
  }
}

Lifecycle hooks diagram