Skip to main content

Component Lifecycles

Genesis Elements go through several lifecycle stages from creation to removal. Understanding these lifecycles is crucial for proper component initialization, cleanup, and state management.

Here are some lifecycle methods that we have access to through GenesisElement:

Connected & Disconnected

connectedCallback lifecycle runs when a component is added to the DOM - perfect time for setup.

disconnectedCallback lifecycle runs when a component is removed from the DOM - perfect time for cleanup.

import {
attr,
customElement,
GenesisElement,
html,
} from "@genesislcap/web-core";

const template = html<MyButton>`<button>Click Me</button>`;

@customElement({
name: "my-button",
template,
styles,
})
export class MyButton extends GenesisElement {
@attr label: string = "Submit";
@attr disabled: boolean = false;

connectedCallback() {
super.connectedCallback(); // Let GenesisElement do its setup first
console.log("Button is now connected to the DOM and ready for interaction");
}

disconnectedCallback() {
super.disconnectedCallback(); // Let GenesisElement do its cleanup first
console.log("Button is no longer interactive and removed from DOM");
}
}

Changed Callbacks

Changed Callback lifecycle runs when attributes/properties update - handle state changes. The name varies depending on the name of the attribute.

note

In the following example you'll notice we have not included the connectedCallback and disconnectedCallback. You only need to add them explicitly if you need to run your own code in the lifecycles, you can omit them otherwise.

import {
attr,
customElement,
GenesisElement,
html,
} from "@genesislcap/web-core";

const template = html<MyButton>`<button>Click Me</button>`;

@customElement({
name: "my-button",
template,
styles,
})
export class MyButton extends GenesisElement {
@attr label: string = "Submit";
@attr disabled: boolean = false;

labelChanged(oldValue, newValue) {
console.log(`Button text changed from ${oldValue} to ${newValue}`);
}
}

The labelChanged method will be triggered and consequently log the following statement when the label attribute is changed in the template:

<my-button label="Cancel"></my-button>

Button text changed from Submit to Cancel