Deep Diving Into Javascript Properties -Lightning Web Component
Objective
Learn about Lightning Web Component Javascript properties and their behaviours.
In this unit, we will be learning that how JS properties of LWC works. When and how they re-render the component. We will have a JS Property App to understand deeply the behaviour of properties.
App Description:
To understand better, i have created a simple demo app. Which will show the how javascript properties works in the lightning web component.
We need to create two lightning web components here.
1. parent
2. child
Create Lightning Web Component Bundle of parent:
1. Open Visual Studio Code.
2. Press Command+Shift+P (Mac), Ctrl+Shift+P( Windows)
3. Here type SFDX: Create Lightning Web Component
4. It will ask for the desired directory, Just press enter
5. Give the name to your Lightning Web Component as parent and press enter.
Create Lightning Web Component Bundle of child:
1. Open Visual Studio Code.
2. Press Command+Shift+P (Mac), Ctrl+Shift+P( Windows)
3. Here type SFDX: Create Lightning Web Component
4. It will ask for the desired directory, Just press enter
5. Give the name to your Lightning Web Component as child and press enter.
Code Time:
Now lets put the codes in the files that you have just created:
Deploy the Code to Scratch Org:
Open Visual Studio Code’s Integrated Terminal.
Type below command and hit the enter.
sfdx force:source:push
Add Lightning Web Component to Lightning Home Layout:
1. Open any app in lightning and go to the home tab.
2. Click on Gear Icon (Top-Right) and then click on Edit Page.
3. Here in the left side, Scroll down to Custom section.
4. Drag parent component to the home layout.
5. Click on Save and Activate.
6. After successful activation. Go back to the Home tab.
Note: We will run and understand this app later in the chapter.
Let’s Learn Lightning Web Component Javascript Properties with the App:
Lightning Web Component have two types of properties:
1. Reactive Property: Whenever values changes to the property then it does re-render the entire component. There are two reactive properties in lightning web components.
A. Public: This type of property is decorated with the @api decorator. We use this property when a parent component is updating the child component’s property and we need to re-render the child component. To accomplish this we can decorate child component’s property with @api decorator.
B. Private: This type of property is decorated with @track decorator. We use this property when we want to update a component whenever the component’s property get updated. To accomplish this we can decorate component’s property with @track decorator.
Note: Parent component can not send the value to child component’s private property and the child component will not be re-rendered.
Need to Remember: Reactive property does not mean that only value of property will re-render on the component. Instead of this the whole component will be re-rendered. be careful while defining reactive properties.
2. Non-Reactive Property: Whenever values changes to the property then it does not re-render the component. We don’t need to use decorator to define this type of property.
Special Point to Remember: As i described above reactive property re-render the entire component. Let’s you have private X property which is non-reactive and Y is reactive private.
If something changes in X then component does not re-render because it is non-reactive private property. Assume that X have 1234 value. Now Y has been updated and due to this component get re-rendered. Now you will see both X and Y values in the component.
Here is fig showing simple flow of lightning web component properties:
Its time to run the app that we deployed in the beginning:
The app have parent component and child component. Parent component is calling the child component and providing the values to reactive public property, reactive private property and non-reactive private property.
Now load the org and open the component in salesforce org. You will see that only first one has able to pass the value to child’s property. Because reactive-public-property (@api reactivePublicProperty) is reactive public property.
But other 2 columns are not showing the value because they both are private.
Note: As we earlier talked about special thing that non-reactive private property will be updated if component have any reactive property update.
To check this, enter some value in Non-Reactive Private Property box. You will see that nothing has changed or re-rendered.
But now change any reactive property (public/private), The value of non-reactive private will be updated on the component.
Now play with this app, try to change the values.
I believe that this blog has helped you to understand the concept of lightning web component properties.
Cheers!!!
Read more blogs on Lightning Web Components here…
Must Read More from Salesforce Docs:
JavaScript Property Names
Reactive Property Data Types
Boolean Properties