Refactor component will receive props

packages/react-vis/src/make-vis-flexible.js

@@ -140,9 +140,13 @@ function makeFlexible(Component, isWidthFlexible, isHeightFlexible) {
       this.cancelSubscription = subscribeToDebouncedResize(this._onResize);
     }
 
-    // eslint-disable-next-line react/no-deprecated
-    componentWillReceiveProps() {
-      this._onResize();
+    componentDidUpdate(prevProps, prevState) {
+      if (
+        this.state.width !== prevState.width ||
+        this.state.height !== prevState.height
+      ) {
+        this._onResize();
+      }
     }
 
     componentWillUnmount() {

packages/react-vis/src/plot/series/arc-series.js

@@ -74,8 +74,10 @@ class ArcSeries extends AbstractSeries {
     this.state = {scaleProps};
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.setState({scaleProps: this._getAllScaleProps(nextProps)});
+  componentDidUpdate(prevProps) {
+    if (this.props !== prevProps) {
+      this.setState({scaleProps: this._getAllScaleProps(this.props)});
+    }
   }
 
   /**

packages/react-vis/src/plot/xy-plot.js

@@ -144,23 +144,24 @@ class XYPlot extends React.Component {
     };
   }
 
-  // eslint-disable-next-line react/no-deprecated
-  componentWillReceiveProps(nextProps) {
-    const children = getSeriesChildren(nextProps.children);
-    const nextData = getStackedData(children, nextProps.stackBy);
-    const {scaleMixins} = this.state;
-    const nextScaleMixins = this._getScaleMixins(nextData, nextProps);
-    if (
-      !checkIfMixinsAreEqual(
-        nextScaleMixins,
-        scaleMixins,
-        nextProps.hasTreeStructure
-      )
-    ) {
-      this.setState({
-        scaleMixins: nextScaleMixins,
-        data: nextData
-      });
+  componentDidUpdate(prevProps) {
+    if (this.props !== prevProps) {
+      const children = getSeriesChildren(this.props.children);
+      const nextData = getStackedData(children, this.props.stackBy);
+      const {scaleMixins} = this.state;
+      const nextScaleMixins = this._getScaleMixins(nextData, this.props);
+      if (
+        !checkIfMixinsAreEqual(
+          nextScaleMixins,
+          scaleMixins,
+          this.props.hasTreeStructure
+        )
+      ) {
+        this.setState({
+          scaleMixins: nextScaleMixins,
+          data: nextData
+        });
+      }
     }
   }
 

packages/react-vis/src/treemap/index.js

@@ -100,12 +100,13 @@ class Treemap extends React.Component {
     };
   }
 
-  // eslint-disable-next-line react/no-deprecated
-  componentWillReceiveProps(props) {
-    this.setState({
-      scales: _getScaleFns(props),
-      ...getInnerDimensions(props, props.margin)
-    });
+  componentDidUpdate(prevProps) {
+    if (this.props !== prevProps) {
+      this.setState({
+        scales: _getScaleFns(this.props),
+        ...getInnerDimensions(this.props, this.props.margin)
+      });
+    }
   }
 
   /**

packages/react-vis/tests/components/area-series.test.js

@@ -31,6 +31,8 @@ describe('AreaSeries', () => {
     expect($.find('path.area-chart-example').length).toBe(1);
 
     $.setProps({children: <AreaSeries {...{...AREA_PROPS, data: null}} />});
+    $.update();
+
     expect($.find('.rv-xy-plot__series').length).toBe(0);
     expect($.find('.rv-xy-plot__series path').length).toBe(0);
     expect($.find('.area-chart-example').length).toBe(0);

packages/react-vis/tests/components/heatmap.test.js

@@ -30,16 +30,20 @@ describe('Heatmap', () => {
   test('basic rendering', () => {
     const $ = mount(
       <XYPlot width={300} height={300}>
-        <HeatmapSeries {...HEATMAP_PROPS} />
+        <HeatmapSeries data-foo="original" {...HEATMAP_PROPS} />
       </XYPlot>
     );
     expect($.find('.rv-xy-plot__series--heatmap').length).toBe(1);
     expect($.find('.rv-xy-plot__series--heatmap rect').length).toBe(12);
     expect($.find('g.heatmap-series-example').length).toBe(1);
 
     $.setProps({
-      children: <HeatmapSeries {...{...HEATMAP_PROPS, data: null}} />
+      children: (
+        <HeatmapSeries data-foo="set" {...{...HEATMAP_PROPS, data: null}} />
+      )
     });
+    $.update();
+
     expect($.find('.rv-xy-plot__series--heatmap').length).toBe(0);
     expect($.find('.rv-xy-plot__series--heatmap rect').length).toBe(0);
     expect($.find('.heatmap-series-example').length).toBe(0);

packages/react-vis/tests/components/line-series.test.js

@@ -57,6 +57,8 @@ describe('LineSeries', () => {
     expect($.find('path.line-chart-example').length).toBe(1);
 
     $.setProps({children: <LineSeries {...{...LINE_PROPS, data: null}} />});
+    $.update();
+
     expect($.find('.rv-xy-plot__series').length).toBe(0);
     expect($.find('.rv-xy-plot__series path').length).toBe(0);
     expect($.find('.line-chart-example').length).toBe(0);

packages/react-vis/tests/components/radial.test.js

@@ -43,6 +43,8 @@ describe('RadialChart', () => {
     expect($.text()).toBe('yellow againmagentacyanyellowgreen');
 
     $.setProps({data: []});
+    $.update();
+
     expect($.find('.rv-radial-chart__series--pie__slice').length).toBe(0);
     expect($.find('.rv-radial-chart__series--pie__slice-overlay').length).toBe(
       0

packages/react-vis/tests/components/sunburst.test.js

@@ -57,6 +57,7 @@ describe('Sunburst', () => {
     ).toBe(21);
 
     $.setProps({data: INTERPOLATE_DATA});
+    $.update();
     expect($.find('.rv-xy-plot__series--arc-path').length).toBe(9);
   });
 

packages/showcase/examples/force-directed-graph/force-directed-graph.js

@@ -102,10 +102,12 @@ class ForceDirectedGraph extends React.Component {
     };
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      data: generateSimulation(nextProps)
-    });
+  componentDidUpdate(prevProps) {
+    if (this.props !== prevProps) {
+      this.setState({
+        data: generateSimulation(this.props)
+      });
+    }
   }
 
   render() {

packages/showcase/examples/responsive-vis/responsive-scatterplot.js

@@ -74,15 +74,16 @@ export default class ResponsiveScatterplot extends React.Component {
     selectedPoints: []
   };
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    // not the greatest
-    this.setState({
-      binData: transformToBinData(
-        nextProps.data,
-        nextProps.width,
-        nextProps.height
-      )
-    });
+  componentDidUpdate(prevProps) {
+    if (this.props !== prevProps) {
+      this.setState({
+        binData: transformToBinData(
+          this.props.data,
+          this.props.width,
+          this.props.height
+        )
+      });
+    }
   }
 
   getFeatures() {