Migrate Initializers

Replace an init event handler in an Aura component with the standard JavaScript connectedCallback() method in a Lightning web component.

We use the init event in an Aura component to initialize a component after component construction but before rendering.

1<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

The doInit function in the component’s controller performs any necessary initialization.

1({
2  doInit: function (cmp) {
3    // initialize component
4  },
5});

In a Lightning web component, use connectedCallback() instead in the component’s JavaScript file.

1// mySampleInit.js
2import { LightningElement } from "lwc";
3export default class MySampleInit extends LightningElement {
4  connectedCallback() {
5    // initialize component
6  }
7}

See Also

Run Code When a Component Is Inserted or Removed from the DOM