The react hook equivalent to the old componentWillReceive props can be done using the useEffect hook, just specifying the prop that we want to listen for changes in the dependency array.
I.e:
export default (props) => {
useEffect( () => {
console.log('counter updated');
}, [props.counter])
return <div>Hi {props.counter}</div>
}
For componentDidUpdate just by omitting the dependency array, the useEffect function will be called after every re-render.
I.e:
export default (props) => {
useEffect( () => {
console.log('counter updated');
})
return <div>Hi {props.counter}</div>
}
The react hook equivalent to the old componentWillReceive props can be done using the useEffect hook, just specifying the prop that we want to listen for changes in the dependency array.
I.e:
export default (props) => {
useEffect( () => {
console.log('counter updated');
}, [props.counter])
return <div>Hi {props.counter}</div>
}
For componentDidUpdate just by omitting the dependency array, the useEffect function will be called after every re-render.
I.e:
export default (props) => {
useEffect( () => {
console.log('counter updated');
})
return <div>Hi {props.counter}</div>
}
If you use the useMemo hook on top of your component and have it dependent on all your props, it runs before everything everytime props change. useEffect is triggered after the updated render and since dependent on all props it triggers after a rerender depending on all props.
const Component = (...props) => {
// useState, useReducer if have
useMemo(() => {
// componentWillReceiveProps
},[...props]);
// ...other logic and stuff
useEffect(() => {
// componentDidUpdate
}, [...props]);
};
Videos
Wrap the side effect of changing the route in a
useEffect(), and make it dependent onuser, so it would react wheneveruserchanges. You also need tohistoryas a dependency, but it wouldn't change.Assign
meetingData.themeImageto aconstor use it directly, since the component will rerender anyway if it changes.const Example = ({ user, history, meetingData }) => { useEffect(() => { if (_.isEmpty(user)) { history.push("/signin"); } }, [user, history]); const selImg = meetingData.themeImage; return ( // JSX ); }
This could be equivalent to useEffect with dependency in functional component:
useEffect(() => {
if (_.isEmpty(props.user)) {
props.history.push("/signin");
}
setState({
selImg: props.meetingData.themeImage,
});
}, [props.user]);
componentWillReceiveProps is required if you want to update the state values with new props values, this method will get called whenever any change happens to props values.
In your case why you need this componentWillReceiveProps method?
Because you are storing the props values in state variable, and using it like this:
this.state.KeyName
That's why you need componentWillReceiveProps lifecycle method to update the state value with new props value, only props values of component will get updated but automatically state will not get updated. If you do not update the state then this.state will always have the initial data.
componentWillReceiveProps will be not required if you do not store the props values in state and directly use:
this.props.keyName
Now react will always use updated props values inside render method, and if any change happen to props, it will re-render the component with new props.
As per DOC:
componentWillReceiveProps() is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.
React doesn't call componentWillReceiveProps with initial props during mounting. It only calls this method if some of component's props may update.
Suggestion:
Do not store the props values in state, directly use this.props and create the ui components.
Update
componentDidUpdate()
should now be used rather than componentWillReceiveProps
also see an article from gaearon re writing resilient components
There are two potential issues here
- Don't reassign your props to state that is what you are using redux for pulling the values from the store and returning them as props to your component
Avoiding state means you no longer need your constructor or life-cycle methods. So your component can be written as a stateless functional component there are performance benefits to writing your component in this way.
- You do not need to wrap your action in dispatch is you are passing mapDispatcahToProps. If an object is passed, each function inside it is assumed to be a action creator. An object with the same function names, but with every action creator wrapped into a dispatch will be returned
Below is a code snippet that removes the state from your component and relies on the state that has been returned from the redux store
import React from "react";
import { connect } from "react-redux";
const TrajectContainer = ({ trajects, addTraject }) => (
<div className="col-md-6">
<h2>Trajects</h2>
<button className="btn btn-primary" onClick={addTraject}>Add new Traject</button>
{trajects.map(traject => <Traject traject={traject} key={traject.name} />)}
</div>
);
const mapStateToProps = ({ trajects }) => ({ trajects });
export default connect( mapStateToProps, { addTraject })(TrajectContainer);