Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

UNSAFE_componentWillReceiveProps not called when using React 16.3.2

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) {
    ...
  }
...
}
like image 596
Július Retzer Avatar asked May 01 '18 10:05

Július Retzer


People also ask

What is UNSAFE_componentWillReceiveProps?

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.

What should I use instead of componentWillReceiveProps?

getDerivedStateFromProps is one of those newly introduced lifecycle method replacing componentWillReceiveProps , which has now become UNSAFE_componentWillReceiveProps .

How do I use componentWillReceiveProps in react?

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.

What is getDerivedStateFromProps?

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.


1 Answers

I found the issue. react-dom package needs to be upgraded to 16.3.2 version as well.

like image 57
Július Retzer Avatar answered Sep 30 '22 09:09

Július Retzer