Immutable StencilJS Props re-render when changed - stenciljs

Question

I have the following StencilJS component with three properties.
import { Component, h, Prop } from "#stencil/core";
#Component({
tag: 'twl-button',
styleUrls: ['../style-tw.dist.css', './twl-button.scss'],
scoped: true
})
export class ButtonComponent {
#Prop() isBoolean: boolean = false;
#Prop() aNumber: number = -1;
#Prop() aString: string = "a"
componentWillLoad() {
alert(`componentWillLoad: ${this.isBoolean} | ${this.aNumber} | ${this.aString}`)
}
render() {
alert(`rendering: ${this.isBoolean} | ${this.aNumber} | ${this.aString}`)
return (
<button onClick={() => this.didClick()}class={'w-1/3 self-center flex justify-center mt-1/12 py-2 px-2 border border-transparent font-normal text-lg rounded-md text-white bg-nord9 hover:bg-nord14 focus:outline-none focus:border-nord9 focus:shadow-outline-gray active:bg-nord10 transition duration-150 ease-in-out'}>
Click to Change
</button>
);
}
didClick(): void {
this.isBoolean = !this.isBoolean;
this.aNumber = this.aNumber+1;
this.aString = this.aString+"b";
}
}
It's used in JSX as:
<twl-button isBoolean={true} aNumber={0} aString={"init-string"}></twl-button>
My understanding reading the StencilJS documentation is that these properties are implicitly immutable. I would think that an immutable property would also imply no-rendering, since nothing changes. However, when I click the button, the values change and render is called. Where is my misunderstanding?
pacakge.json:
...
"#stencil/core": "^1.17.3",
"#stencil/router": "^1.0.1",
"#stencil/sass": "^1.3.2",
...

Answer 1

You can think of the #Prop() decorator itself as creating a watch on the property (isBoolean, aNumber, aString in your case), and every time a value is assigned to it, the watch performs an equality check (===) on the old value and new value to determine if the value has changed (and therefore, whether a re-render is needed).
You would not see the same behavior if your prop was an object and you set a value on the object #Prop() because even though one of the values has changed, the === reference returns true since the object reference remains the same
#Prop() user: IUser = {
firstName: 'user',
lastName: 'name'
};
...
...
// does not trigger a re-render (since object reference remains unchanged)
user.firstName = 'new user';
// triggers a re-render (because you are essentially creating a new object and assigning it to the user property)
user = {
...user,
firstName = 'new user'
};