Lifecycle hooks

Lifecycle hooks are events dispatched throughout the lifecycle of VistaJS components. These lifecycles represent each stage of this cycle: component mounting, updating, and destroying.

onMount

This hook executes as soon as the component's view is rendered in the DOM.

import { Component, html } from 'vistajs/dom';
import { bootstrap } from 'vistajs/boot';

const App = Component('my-component', ({ onMount }) => {
  
  onMount(() => {
    console.log('Component is mounted!')
  })

  return  () => html`<p>Hello World</p>`;
})

const root = document.querySelector('#root') as Element;

bootstrap(root, App)

onChange

It executes as soon as any component's reactive binding changes.

import { Component, html } from 'vistajs/dom';
import { bootstrap } from 'vistajs/boot';

const App = Component('my-component', ({ onChange }) => {
  const bindedValue = signal('Hello World');
  
  onChange(() => {
    console.log('Component has changed!')
  })

  return  () => html`<p>${bindedValue()}</p>`;
})

const root = document.querySelector('#root') as Element;

bootstrap(root, App)

onDestroy

This hook executes when the component is destroyed from the DOM.

import { Component, html } from 'vistajs/dom';
import { bootstrap } from 'vistajs/boot';

const App = Component('my-component', ({ onDestroy }) => {
  const bindedValue = signal('Hello World');
  
  onDestroy(() => {
    console.log('Component was destroyed!')
  })

  return  () => html`<p>${bindedValue()}</p>`;
})

const root = document.querySelector('#root') as Element;

bootstrap(root, App)