Reaction: why isn't the props frozen?
The reaction assumes not to mutate the supports. I worked under the impression that when the props passed, they would be unchanged or frozen.
The code below does not throw any errors and mutates prop. This is mistake?
try{
var a = this.props.a;
a.push('one')
a.push('two')
a.push('three')
console.log(a)
}catch(err){
console.log(err)
}
source to share
I'm not sure about the exact reasoning behind this, or if it's documented somewhere, but I could guess:
Freezing any assignment to a variable is not easy or even necessarily possible outside of using new or even unfinished browser functionality. Also, deep-freezing all of your props in your application can have performance implications and will certainly need to be removed to build prod.
Can you freeze the assignment of a primitive variable? I do not think so. I think babel does it with a const
way of statically checking the code at compile time.
And can you freeze objects without Object.freeze or ES7 proxy? Again I don't think so, the es5-shim readme says:
which you cannot get in legacy engines
What if someone mutates something? These props are shallowly copied, meaning you won't affect the parent hint unless you change the nested object. However, even if you did this, it will affect the application as it will be destroyed on the next render (just like your modifications).
If something is wrong with me, please let me know! This is just my reasoning.
source to share
It looks like this is the same behavior as const
, you cannot reassign a value, but you can still push on an array or add keys to an object because they are not protected.Anyway, despite being able to do these mutations, you shouldn't do it.
this.props.a = [1,2,3];
will not work
this.props.a.push(123);
will work.
this.props.a = {name: 'John Doe'}
will not work
this.props.a.name = 'John Doe'
will work
If you try to reassign a support in your component, a type error will occur.
Uncaught TypeError: Unable to assign read only property ...
source to share
This is not true. By default, the props are changed. If you are using ES2015, you can make them read-only in your function by doing the following:
const { a } = this.props; // would create a const variable 'a'.
Same as:
const a = this.props.a;
Until you can reassign 'a', you can still mutate it. The value a = 'foo';
throws an error, but you can still do a.push('foo');
.
If you want to use immutable data structures try working with https://github.com/kolodny/immutability-helper or https://facebook.github.io/immutable-js/
source to share
It won't throw any errors unless you explicitly freeze the object (props).
The details are received from the parents and are unchanged as far as the recipient is concerned.
ie React's props
are immutable by default in the sense that your component needs to maintain it as parent data and use it as is. Where can we use state
to maintain local data (component level data) that can be changed at any time and keep the props with the parent.
source to share