trigger-action-on-props-update.mo
If you have ever worked with React, you will have probably used Redux at some point and found it great as your components can subscribe to any changes to the store state and react accordingly. But what happens if you want to similarly handle the update of one of your component's props? For example, call a certain method for a given change of the props?
Well you're in luck, because Facebook provides a set of methods that get called at different points of the lifecycle of a component 1. We are going to look at the
ComponentWillReceivePropsmethod in the following article.Your page has a set of props that can change after it has been mounted and before it gets unmounted. The props change can be triggered from within or outside the page.
- Add to your prop a component that gets updated from outside the page e.g. from a Redux store:
import { Connectivity } from '../../../Connectivity';
const mapStateToProps = state => ({
isConnected: Connectivity.isConnected(state),
});
Let’s also add a component which is rendered at a certain
isTextVisible condition:class MyClass extends Component {
state = {
isConnected: false
isTextVisible: false
}
render () {
return (
if( this.isTextVisible ) {
<Text>
Connexion successful!
</Text>
}
)
}
}
Let’s say you want to have a special behaviour for this Text component, such that it appears for 3 seconds when
isConnected changes from false to true.componentWillReceiveProps (nextProps) {
if (!this.props.isConnected && nextProps.isConnected) {
this.setState(isActivated, () => this.makeTextDisappear())
}
}
makeTextDisappear = () => {
setTimeout(() => this.setState({isTextVisible: false}), 3000)
}
The critical point here is the
if (!this.props.isConnected && nextProps.isConnected) condition (also called hook). It is necessary to be specific about what prop change triggers the desired action, because componentWillReceiveProps is called at every prop update and the code inside is executed each time then. Our code now looks like this:import { Connectivity } from '../../../Connectivity';
class MyClass extends Component {
state = {
isConnected: false
isTextVisible: false
}
componentWillReceiveProps (nextProps) {
if (!this.props.isConnected && nextProps.isConnected) {
this.setState(isActivated, () => this.makeTextDisappear())
}
}
makeTextDisappear = () => {
setTimeout(() => this.setState({isTextVisible: false}), 3000)
}
render () {
return (
if( this.isTextVisible ) {
<Text>
Connexion successful!
</Text>
}
)
}
}
const mapStateToProps = state => ({
isConnected: Connectivity.isConnected(state),
});
A couple of interesting notes2:
componentWillReceivePropscan be called even if the props did not change- If done before
render()is called, then callingsetStatewill not trigger an additional render
Last modified 5yr ago