Can I update a component's props in React.js?
A component cannot update its own props unless they are arrays or objects (having a component update its own props even if possible is an anti-pattern), but can update its state and the props of its children.
For instance, a Dashboard has a speed
field in its state, and passes it to a Gauge child thats displays this speed. Its render
method is just return <Gauge speed={this.state.speed} />
. When the Dashboard calls this.setState({speed: this.state.speed + 1})
, the Gauge is re-rendered with the new value for speed
.
Just before this happens, Gauge's componentWillReceiveProps
is called, so that the Gauge has a chance to compare the new value to the old one.
PROPS
A React component should use props to store information that can be changed, but can only be changed by a different component.
A React component should use state to store information that the component itself can change.
A good example is already provided by Valéry.
Props can change when a component's parent renders the component again with different properties. I think this is mostly an optimization so that no new component needs to be instantiated.