Life-cycle

Lifecycle komponen dalam Salesforce Lightning mengacu pada serangkaian tahapan yang dilalui oleh sebuah komponen dari saat ia dibuat hingga dihapus. Berikut adalah tahapan-tahapan utama beserta contohnya:

1. Initialization (Inisialisasi)

Tahap ini terjadi ketika komponen pertama kali dibuat.

Method terkait: constructor()

Contoh:

import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
    constructor() {
        super();
        console.log('Component is being initialized');
    }
}

2. Rendering (Penyajian)

Tahap ini terjadi ketika komponen siap untuk ditampilkan di DOM.

Method terkait: render()

Contoh:

import { LightningElement } from 'lwc';
import view1 from './view1.html';
import view2 from './view2.html';

export default class MyComponent extends LightningElement {
    showView1 = true;

    render() {
        return this.showView1 ? view1 : view2;
    }
}

3. Insertion (Penyisipan)

Tahap ini terjadi setelah komponen disisipkan ke dalam DOM.

Method terkait: connectedCallback()

Contoh:

import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
    connectedCallback() {
        console.log('Component is inserted into the DOM');
        // Lakukan inisialisasi atau pengambilan data di sini
    }
}

4. Rendering Children (Penyajian Anak)

Tahap ini terjadi setelah semua elemen anak selesai di-render.

Method terkait: renderedCallback()

Contoh:

import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
    renderedCallback() {
        console.log('Component and its children have finished rendering');
        // Lakukan operasi DOM atau inisialisasi library pihak ketiga di sini
    }
}

5. Updating (Pembaruan)

Tahap ini terjadi ketika properti atau atribut komponen berubah.

Catatan: Tidak ada method khusus, tetapi perubahan akan memicu re-render.

Contoh:

import { LightningElement, api, track } from 'lwc';

export default class MyComponent extends LightningElement {
    @api externalProp;
    @track internalState = 'initial';

    updateState() {
        this.internalState = 'updated';
        // Ini akan memicu re-render
    }
}

6. Removal (Penghapusan)

Tahap ini terjadi ketika komponen dihapus dari DOM.

Method terkait: disconnectedCallback()

Contoh:

import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
    disconnectedCallback() {
        console.log('Component is being removed from the DOM');
        // Lakukan pembersihan, seperti membatalkan langganan event
    }
}

Diagram Lifecycle Komponen

Berikut adalah diagram Mermaid yang mengilustrasikan alur lifecycle komponen Salesforce Lightning:

Diagram ini menunjukkan alur lifecycle komponen Salesforce Lightning dari awal hingga akhir, termasuk tahap pembaruan dan penghapusan. Ini dapat membantu developer untuk memahami kapan setiap method lifecycle dipanggil dan bagaimana mereka saling berhubungan.

Dengan memahami lifecycle komponen ini, Anda dapat mengoptimalkan kinerja komponen Anda, mengelola sumber daya dengan lebih baik, dan memastikan bahwa komponen Anda berperilaku seperti yang diharapkan pada setiap tahap kehidupannya.