Lifecycle Methods in

Lightning Web Components

(LWC)

#kb_sfdc_content
Introduction:

Lightning Web Components (LWC) in Salesforce have a lifecycle consisting of various phases during which different
operations can be performed.

Understanding these lifecycle methods is essential for effective component development and management.

This document provides an overview of LWC lifecycle methods and their purposes.

#kb_sfdc_content
1. Constructor:
- Purpose: The constructor is called when a component instance is created.
- Usage: Initialize component properties or variables.
- Syntax: `constructor() { }`

2. ConnectedCallback:
- Purpose: Invoked when the component is inserted into the DOM.
- Usage: Perform setup tasks that require access to the DOM.
- Syntax: `connectedCallback() { }`

#kb_sfdc_content
3. RenderedCallback:
- Purpose: Invoked after the component's elements are rendered in the DOM.
- Usage: Perform operations after rendering, such as updating the UI dynamically.
- Syntax: `renderedCallback() { }`

4. DisconnectedCallback:
- Purpose: Called when the component is removed from the DOM.
- Usage: Clean up resources or perform cleanup tasks.
- Syntax: `disconnectedCallback() { }`

#kb_sfdc_content
5. ErrorCallback:
- Purpose: Invoked when an error occurs during rendering, constructor, or lifecycle methods.
- Usage: Handle errors gracefully and display error messages.
- Syntax: `errorCallback(error, stack) { }`

6. Render:
- Purpose: Required method responsible for rendering the component's HTML.
- Usage: Return the HTML template of the component.
- Syntax: `render() { }`

#kb_sfdc_content
7. Getter/Setter:
- Purpose: Define properties with getter/setter methods for reactive data binding.
- Usage: Retrieve or set property values and trigger re-renders.

- Syntax:
```javascript
get propertyName() { }
set propertyName(value) { }

8. Track:
- Purpose: Marks a property as reactive, causing the component to rerender when its value changes.
- Usage: Ensure that changes to tracked properties trigger component rerenders.
- Syntax: `@track propertyName;`
#kb_sfdc_content
9. AdoptedCallback:
- Purpose: Called when the component is moved to a new document.
- Usage: Handle scenarios where the component is dynamically moved within the DOM.
- Syntax: `adoptedCallback() { }`

10. AttributeChangedCallback:
- Purpose: Invoked when one of the component's observed attributes is modified.
- Usage: React to changes in specific attributes and update component state accordingly.
- Syntax: `attributeChangedCallback(name, oldValue, newValue) { }`

#kb_sfdc_content
11. Connected and Disconnected Callbacks:
- Purpose: Callbacks that replace `connectedCallback` and `disconnectedCallback` respectively in LWC for
enabling/disabling event listeners.
- Usage: Enable or disable event listeners during component lifecycle events.
- Syntax:
```javascript
connectedCallback() {
// Add event listeners
}

disconnectedCallback() {
// Remove event listeners
}

#kb_sfdc_content
#kb_sfdc_content