Prop Mutability

[aparnapatil01]

As per documentation, https://stenciljs.com/docs/properties#prop-mutability - It's important to know, that a Prop is by default immutable from inside the component logic. Once a value is set by a user, the component cannot update it internally.

However, I can set new value to the prop without declaring it as mutable.

Code

// index.html
<my-component color="pink"></my-component>

//my-component.tsx
import { Component, h, Prop } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  @Prop() color: string; 

  componentDidLoad() {
    this.color = "New Green";
    console.log(this.color); // Prints "New Green"
  }
  render() {
    return (
      <div>{this.color}</div>
    )
  }
}

The above code log "New Green" to console as well render updated value of property color.

It would be great if you could clarify the exact purpose of mutable property?

[jsanz1209]

The same thing keeps happening me, with 1.8.8 version

[ralscha]

I'm also a bit confused using version 1.12.6.
It does not matter if I omit mutable, or set it to true or to false. The effect is always the same. The property is mutable from inside the component. Tested with development and production builds.

[kskeerthi]

This had happened with me as well.... Is there anything that had been changed from the new version but it is not been updated in the documentation??? I had put the prop value on didload but without me specifying mutable: true, it is still updated. If someone is aware of the reason kindly let me know!!!

import { Component, ComponentInterface, h, Prop} from '@stencil/core';

@component({
tag: 'app-button',
styleUrl: 'app-button.css'
// shadow: true,
})
export class AppButton implements ComponentInterface {
@prop() message : string = "Hello Everyone!!"
componentDidLoad(){

this.message ="kkkk"
console.log(this.message)
}
render() {
return (

{this.message}

);
}

}

[Sandhyah23]

Stencil document is confusing, prop values are mutable inside component irrespective of the 'mutable' option.

[RenanRossiDias]

I'm using 2.0.1 and experiencing the very same problem here.
Beyond that, the @prop isn't mutating on it's parent declaration nor reflecting changed values there.

[claviska]

See my comment here. I'm looking into why the warning isn't emitted.

I don't believe Stencil can actually enforce immutability, but you should see a warning in dev mode when the immutable prop is changed. This doesn't appear to be happening in 2.3.0.

[RenanRossiDias]

See my comment here. I'm looking into why the warning isn't emitted.

I don't believe Stencil can actually enforce immutability, but you should see a warning in dev mode when the immutable prop is changed. This doesn't appear to be happening in 2.3.0.

@claviska That should be enough to help with this issue.
Though i'm still confused about mutable, should it reflect it's changes to it's direct parent, acting like a two-way prop binding, or mutable only serves the purpose of 'locking' changes to a property not to be modified inside components?

[claviska]

or mutable only serves the purpose of 'locking' changes to a property not to be modified inside components?

Any prop can be changed outside of the component, immutable or not, otherwise it would be a constant.

[claviska]

While we don't stop props from mutating, we can (and always intended to) emit a warning in dev. That logic has been fixed in #2779.