September 11, 2023

Lightning Web Component(LWC):

It is a new web programming model for developing lightning components on salesforce platform. This framework is built on HTML, CSS and JavaScript. It uses custom elements like templates, modules, shadow DOM, and other new language constructs of ECMAScript7.

Bundle description

• Component .HTML //HTML file created by default
• Controller .JS //JavaScript created by default
• JS-meta .xml //created by default

*if you want to use your component inside the app page or record page or homepage or community then you need to specify those configuration in the js-meta.xml file.*

• Style .CSS //css file manual creation
• Icon .SVG //svg file manual creation

LWC Lifecycle Hooks

1- Constructor

• Called when the component is created.
• Flow from parent to child.

constructor(){
    super();
}

2- connectedCallback

• Called when the element is inserted into a document.
• Flows from parent to child.
• Perform initialization tasks, such as fetch data, set up caches, or listen for events.

connectedCallback(){
    let con=this.template;
    console.log(con.isConnected); //to check whether a component is connected to the DOM or not
}

3- renderedCallback

• called after every render of the component.
• flows from child to parent.
• getting called more than once.
• use a private boolean property like hasRendered to track whether renderedCallback() has been executed.
• first time renderedCallback() executes, perform the one-time operation and set hasRendered = true.

renderedCallback(){
            
}

4- render

• Call this method to update the UI. It may be called before or after connectedCallback().
• It’s rare to call render() in a component.
• To show dynamic HTML template.

render(){
            
}

5- disconnectedCallback

• Called when the element is removed from a document.
• flows from parent to child.

disconnectedCallback(){
            
}

6- errorCallback

• Called when a descendant component throws an error.
• The error argument is a JavaScript native error object and the stack argument is a string.

errorCallback(error, stack){
            
}

 

 

Common Interfaces used in JS-meta .xml

 

5 2 votes

Article Rating

Subscribe

Login

Notify of

new follow-up comments new replies to my comments

Label

{} [+]

Name*

Email*

Website

Label

{} [+]

Name*

Email*

Website

4 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

Somya Srivastava

1 year ago

Hey Asif,

Amazing write-up !!

1

Reply

admin

Author

Reply to  Somya Srivastava

1 year ago

Thanks Somya!

0

Reply

Sirisha

1 year ago

Very well explained

1

Reply

admin

Author

Reply to  Sirisha

1 year ago

Thanks Sirisha!

0

Reply