Frequently asked Interview Question on LWC

This is one of the most frequently asked interview questions on LWC.

The reason this question is a bit tricky is, it has something called an edge case (something that happens rarely).

In this scenario, we have two properties person and message and with on click of the button am trying to change the content of both the props, which are person and message;

import { LightningElement } from 'lwc';
export default class ExploreQuestion extends LightningElement{

    person = {
        name: 'Teja',
        age: 100,
        location: 'mars'
    }
    
    message = 'Welcome to Salesforce Casts!';
    
    handleClick(){
      this.name = 'Krishna Teja';
        this.message = 'Grand Welcome to Salesforce Casts!';
    }
}

And in the template file am rendering both the props.

<template>
    Hey {message}!
    
    This is {person.name}
    
    <lightning-button label="Change" onclick={handleClick}></lightning-button>

</template>

Now, will I be able to see the updated value for person name on click if the button?

Because objects can only be tracked when I use @track decorator and am not using that in my controller.js file.

Support your answer whatever it is.

Got your answer?

Okay, try to compare that with my answer.

It's going to show the updated name of the person though @track decorator is not used.

Tell you why, when the button is clicked the content of the message is being changed and since message is being used in the template file the whole component is going to re-render.

If the message is not used in the template file then we will not see the updated value of person.name

In that process, it fetches the updated values for message and person.name.

Let me your thoughts on this!