KEMBAR78
Salesforce lwc development workshops session #6 | PPTX
Salesforce LWC Development
Workshops - Session #6
By Techila Global Services
Course Overview
This is a series of sessions intended for developers who want to build components using
Lightning Web Component framework.
• We are going to cover the most common scenarios and terminologies used
in LWC.
• Also we will be building small real time project with LWC demonstrating the
concepts of LWC.
Agenda
• Component Lifecycle
• Lifecycle Hooks
Component Lifecycle
Lifecycle Flow
A lifecycle hook is a callback method triggered at a specific phase a components lifecycle.
What is Lifecycle Hook?
1. constructor()
Created when the component is created.
Can’t access the child elements, here as the flow is parent to child.
The first statement must be call to the super()
Properties are not passed yet
Similar to the init handler in aura.
Use case: Setting the default values.
2. connectedCallback()
Called when the component is inserted into the DOM tree.
Can’t access the child elements here as the flow is parent to child.
Use case: To subscribe the event, load data for initialization.
Lifecycle Hooks
3. disconnectedCallback()
Called when the component is removed from the DOM tree.
Flows from parent to child.
Use Case: Unsubscribe events.
4. renderedCallback()
Called when the component is rerendered.
This is called every time the component is rendered.
Flows from child to parent.
Use Case: Load styles, load scripts.
Lifecycle Hooks
5. render()
This function is used to render different templates dynamically.
Flows from parent to child.
Use Case: Dynamically change the html contents.
6. errorCallback(error, stack)
Called when there is any error in one of the lifecycle hooks of the component.
This method has two arguments error and the stack.
Use Case: Render error views and display errors occurred in the child elements.
Lifecycle Hooks
Demo
Questions
Please follow us for updates :
Techila Academy –
https://techilaservices.com/academy/
Facebook –
https://www.facebook.com/techilaservices
Linkedin –
https://www.linkedin.com/company/techila-global-services
Whatsapp Group LWC –
https://chat.whatsapp.com/EZ94iH5MQVWG2d1xrAYdUF
● Component Lifecycle
● Lifecycle Hooks
References
Salesforce lwc development workshops  session #6

Salesforce lwc development workshops session #6

  • 1.
    Salesforce LWC Development Workshops- Session #6 By Techila Global Services
  • 2.
    Course Overview This isa series of sessions intended for developers who want to build components using Lightning Web Component framework. • We are going to cover the most common scenarios and terminologies used in LWC. • Also we will be building small real time project with LWC demonstrating the concepts of LWC.
  • 3.
  • 4.
  • 5.
    A lifecycle hookis a callback method triggered at a specific phase a components lifecycle. What is Lifecycle Hook?
  • 6.
    1. constructor() Created whenthe component is created. Can’t access the child elements, here as the flow is parent to child. The first statement must be call to the super() Properties are not passed yet Similar to the init handler in aura. Use case: Setting the default values. 2. connectedCallback() Called when the component is inserted into the DOM tree. Can’t access the child elements here as the flow is parent to child. Use case: To subscribe the event, load data for initialization. Lifecycle Hooks
  • 7.
    3. disconnectedCallback() Called whenthe component is removed from the DOM tree. Flows from parent to child. Use Case: Unsubscribe events. 4. renderedCallback() Called when the component is rerendered. This is called every time the component is rendered. Flows from child to parent. Use Case: Load styles, load scripts. Lifecycle Hooks
  • 8.
    5. render() This functionis used to render different templates dynamically. Flows from parent to child. Use Case: Dynamically change the html contents. 6. errorCallback(error, stack) Called when there is any error in one of the lifecycle hooks of the component. This method has two arguments error and the stack. Use Case: Render error views and display errors occurred in the child elements. Lifecycle Hooks
  • 9.
  • 10.
  • 11.
    Please follow usfor updates : Techila Academy – https://techilaservices.com/academy/ Facebook – https://www.facebook.com/techilaservices Linkedin – https://www.linkedin.com/company/techila-global-services Whatsapp Group LWC – https://chat.whatsapp.com/EZ94iH5MQVWG2d1xrAYdUF
  • 12.
    ● Component Lifecycle ●Lifecycle Hooks References