This document provides an overview of topics covered in Day 2 of a 5-day Lightning Web Components learning series, including decorators like @track and @api, component lifecycle hooks, and using getter/setter properties. Decorators are discussed for managing reactive data, exposing public properties and methods. The component lifecycle is explained, covering the constructor, connectedCallback, renderedCallback, and disconnectedCallback methods. Upcoming sessions on events, data, and additional topics are also promoted.

1. Letterkenny, Ireland
Developers Group
Lk_Sf_Devs LkTrailblazers
Welcome to our virtual learning series
Learn Lightning Web Components in 5 Days
Day 2 - Recap + Decorators, Lifecycle hooks
and Compositions

3. Nishant Singh Panwar
Community Group Leader
Salesforce Developer and Consultant
● 6 Years of Salesforce Implementation Experience
● 8x Salesforce Certified - Application Architect
UDAIPUR
Nishant_SP

4. Actions
bit.ly/lwcquery

5. Sahil Batra (Director @ MTX Group Inc.)
Industry Experience
Having 9 year of experience in IT Industry and 6 years in Salesforce
ecosystem.Started my Salesforce career as Developer and have played
various roles like Technical Lead , Technical Architect and Corporate
Trainer.
Professional Highlights
● Manage Salesforce trainings and certifications.
● Work as Technical Architect / Principal Developer on Projects.
● Hold 5 Salesforce Certifications and 1 Google certification.
● Conducted Training in India, US , Australia and UK.
● Trained 500+ freshers and 300+ lateral folks in Salesforce.
● Trained 800+ students and 250+ faculty members.
Email : sahilbatraa@gmail.com
Twitter : sahilbatraa18

6. Topics covered in Session 1
● Introduction to LWC
● Why LWC ?
● 2014 Web stack
● 2019 Web Stack
● LWC Framework
● Aura & LWC
● Environment Setup
● LWC Bundle
● Build your First Component
● Applying CSS to Components
● Data Binding
● Conditional Rendering
● Loop & Iteration

7. Decorators : @track
Demo 3 & 6 : Reactive Private Properties
● Used with Private Property.
● Used if property is Object or an Array.
● All Primitive Type properties are reactive by Default.
● Data Types
○ Primitive Values - No @track Required
○ Objects - require @track
○ Arrays - require @track

8. Decorators : @api
Demo 7 : Public Properties
● Used with Public Property.

9. Decorators : @api
Demo 7 : Public Properties Mutation Demo
● Objects passed to components are read only.
● To trigger a mutation use events.
● Use primitive values for public properties
○ Define data shape and no complex documentation is required.
○ Standard HTML element only accept primitive values for attributes.

10. Public Boolean Properties
Demo 8 : Public Boolean Properties
● By Default value is false.
● Including a attribute value means passing true.

11. Use getter & setter to modify data
Demo 9 : getter setter properties
● Modify property value
● No need to declare a property
● If you write a setter for public property,you must also write a getter.
● Best practice is to annotate getter with @api. Do not annotate both.

12. Call Method on Child Component
Demo 10 : Public Methods
● To expose public method expose it with @api
● Parent component can call method to communicate down the hierarchy.
● querySelector() - return first element which matches selector
● querySelectorAll() - return an array of DOM elements.
● Do not use id as HTML template renders id may transformed into global unique
values

13. Using Slots
Demo 11 : Slots Demo
● Use to pass markup into components
● Similar to facets in Aura
● We have named and unnamed slots
● Do not include more than one unnamed slot

14. Component Lifecycle
Component
Requested
Constructor is
called
Update Public
Properties
Has public
properties?
Dom Inserted
Connected
Callback
DOM
Rendered
Has Child
Components?
Yes
Yes
Rendered
callback on
Child
Rendered
callback on
Parent
Parent
Removed from
DOM
disconnectedcallback
on Parent
Child removed
from DOM
disconnectedcallback
on Child

15. Component Lifecycle
● Constructor
○ Fires when component instance is created.
○ DOM manipulation cannot be done as DOM is not inserted yet.
○ Attribute assignment cannot be done.
○ Public properties are also not available

16. Component Lifecycle
● connectedCallback()
○ Fires when DOM is inserted.
○ You cannot access child elements as it flows from parent to child.
○ Fire more than once during lifecycle if we reorder component.
○ Mostly used for adding up event listeners.
○ DOM manipulation cannot be done as it is not rendered yet.
○ Attribute value assignment can be done here.
○ Flows from Parent to Child.

17. Component Lifecycle
● renderedCallback()
○ Called on child component first and than on to parent.
○ Use to perform logic after component has finished rendering phase.
○ Is called many times and we use some logic to execute only once.
○ Can create infinite loops.
○ Do not update public properties & tracked properties in renderedCallback()

18. Component Lifecycle
● disconnectedCallback()
○ Flows from Parent to child.
○ Called when component is removed from the DOM.
Demo 12 : Lifecycle Demo

19. Post your Queries @ bit.ly/lwcquery

20. Coming Up
● 14 May - Component communication using events.
bit.ly/lwcday3
● 21 May - Working with Salesforce data including LDS.
bit.ly/lwcday4
● 28 May - Navigation Services, Aura with LWC interoperability & extra topics.
bit.ly/lwcday5
RSVP