I followed the advice in https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path and after upgrading to React 16.3.2 I wanted to rename all our soon to be deprecated lifecycle methods to their UNSAFE_
equivalents.
However I noticed that UNSAFE_componentWillReceiveProps
is not called at all. When I change it back to componentWillReceiveProps
it works. Any ideas why?
class Chart extends React.Component<ChartProps> {
chartContainer: SVGSVGElement;
tooltip: HTMLDivElement;
xScale: ScaleBand<string>;
yScale: ScaleLinear<number, number>;
UNSAFE_componentWillReceiveProps(nextProps: Props) {
...
}
...
}
UNSAFE_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.
getDerivedStateFromProps is one of those newly introduced lifecycle method replacing componentWillReceiveProps , which has now become UNSAFE_componentWillReceiveProps .
ReactJS – componentWillReceiveProps() MethodThis method is used during the updating phase of the React lifecycle. This function is generally called if the props passed to the component change. It is used to update the state in response with the new received props.
ReactJS – getDerivedStateFromProps() Method This method is called before the rendering or before any updation of the component. This method is majorly used to update the state, before the rendering of the component, which depends upon the props received by the component.
I found the issue. react-dom
package needs to be upgraded to 16.3.2 version as well.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With