diff --git a/packages/react-vis/src/make-vis-flexible.js b/packages/react-vis/src/make-vis-flexible.js
index 9c875abe7..071e7e7b2 100644
--- a/packages/react-vis/src/make-vis-flexible.js
+++ b/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() {
diff --git a/packages/react-vis/src/plot/series/arc-series.js b/packages/react-vis/src/plot/series/arc-series.js
index 2b90c63ae..be7f7a2b0 100644
--- a/packages/react-vis/src/plot/series/arc-series.js
+++ b/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)});
+    }
   }
 
   /**
diff --git a/packages/react-vis/src/plot/xy-plot.js b/packages/react-vis/src/plot/xy-plot.js
index ccb503c5a..1f7b563fb 100644
--- a/packages/react-vis/src/plot/xy-plot.js
+++ b/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
+        });
+      }
     }
   }
 
diff --git a/packages/react-vis/src/treemap/index.js b/packages/react-vis/src/treemap/index.js
index 2badb12d4..c9a466868 100644
--- a/packages/react-vis/src/treemap/index.js
+++ b/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)
+      });
+    }
   }
 
   /**
diff --git a/packages/react-vis/tests/components/area-series.test.js b/packages/react-vis/tests/components/area-series.test.js
index 993d488e3..6829f507e 100644
--- a/packages/react-vis/tests/components/area-series.test.js
+++ b/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);
diff --git a/packages/react-vis/tests/components/heatmap.test.js b/packages/react-vis/tests/components/heatmap.test.js
index 72109a0af..6c990363f 100644
--- a/packages/react-vis/tests/components/heatmap.test.js
+++ b/packages/react-vis/tests/components/heatmap.test.js
@@ -30,7 +30,7 @@ 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);
@@ -38,8 +38,12 @@ describe('Heatmap', () => {
     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);
diff --git a/packages/react-vis/tests/components/line-series.test.js b/packages/react-vis/tests/components/line-series.test.js
index f4261dafe..8eb507fa2 100644
--- a/packages/react-vis/tests/components/line-series.test.js
+++ b/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);
diff --git a/packages/react-vis/tests/components/radial.test.js b/packages/react-vis/tests/components/radial.test.js
index a9caafc17..2d7d96155 100644
--- a/packages/react-vis/tests/components/radial.test.js
+++ b/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
diff --git a/packages/react-vis/tests/components/sunburst.test.js b/packages/react-vis/tests/components/sunburst.test.js
index 0f6b27470..caaf53bc5 100644
--- a/packages/react-vis/tests/components/sunburst.test.js
+++ b/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);
   });
 
diff --git a/packages/showcase/examples/force-directed-graph/force-directed-graph.js b/packages/showcase/examples/force-directed-graph/force-directed-graph.js
index 779357de0..a6c00f4b4 100644
--- a/packages/showcase/examples/force-directed-graph/force-directed-graph.js
+++ b/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() {
diff --git a/packages/showcase/examples/responsive-vis/responsive-scatterplot.js b/packages/showcase/examples/responsive-vis/responsive-scatterplot.js
index ac3b0f449..dce3b6982 100644
--- a/packages/showcase/examples/responsive-vis/responsive-scatterplot.js
+++ b/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() {