Difference between getter ,connnectedcallback() in lwc .When to use Getter and when to use ConnectedCallback() in LWC

Question

I need help in understanding the below issue. Looks like a bit weird one or might be i am not aware of basics of LWC. 3 ways to test and understand this :-

1. Comment connectedCallback Code, In this case by default getter method is called ,its value is getting displayed on HTML but its value is not changing on button click its remains the same. Why?
2. Uncomment connectedCallback Code, in this case ,connectedcallback value is not getting dispalyed. Seems like getter method is overriding everything as value inside getter methd is only getting displayed.
3. On commenting getter method ,connectedCallback() value is getting displayed and on button click its value is getting changed,which seems OK to me. So ,my doubt is when to use ConnectedCallback and when to use getter method.

JS controller :-

export default class ParentWebComp extends LightningElement {
    strVar='';
    get message(){
        return  this.strVar='LWC getter';
    }
    connectedCallback(){
        this.strVar='LWC connectedCallback';
    }
    handleClick(event){
        this.strVar='Due to button Click';
    }

HTML template:-

{message}<br/>
{strVar}<br/>
<lightning-button onclick={handleClick}/>

Answer 1

What are you doing is you are returning a hard coded value in the getter. Even if the connectedCallback is setting the value, that is being overridden by getter as you have hard coded it there. Same is the case with button click. Check this playground:- Playground

So, Basically if any property value change took place in component that has been referenced in the getter, getter will reevaluate its value.

To validate this, i have added another property which is not being used in getter and changing its value with button click. This does not trigger the getter to fire.

Now, I am going to change the property value used in getter via button click, this time as soon as you click the button, button handler changes the property value referenced in getter and that triggers getter to reevaluate its value.

To understand the connectedCallback, it fires when component gets loaded. It will not refire again once loaded. You might have heard of init handler in aura which does something on load of the component, connectedCallback does the same in Lightning web Component.

The big difference between use of getter and connectedCallback is:-

1. connectedCallback fires once in lifecycle whereas getter may fire many times based on changes in property values referenced in it.
2. To compute a value for a property, use a JavaScript getter. For example, you have to dynamically return a uppercase value of string stored in a property dynamically, you can make use of getter.
3. connectedCallback perform initialization tasks, such as fetch data, set up caches, or listen for events (such as publish-subscribe events)

To solve your problem, you can remove the value assignment in getter. It will update the value accordingly.

    strVar='';
    get message(){
        return  this.strVar;
    }
    connectedCallback(){
        this.strVar='LWC connectedCallback';
    }
    handleClick(event){
        this.strVar='Due to button Click';
    }

Answer 2

Your problem is that your getter is also assigning a value:

return  this.strVar='LWC getter';

The result of this.strVar = 'LWC getter' is true (a boolean success value)

You should instead return

return this.strVar;

In the getter.

If you do this, the order of operations will be:

1. Initial assignment.

2. connectedCallback()

3. Button press (which causes a change that will make the getter run again)