diff --git a/packages/react-vis/package.json b/packages/react-vis/package.json
index 685a4823f..a4459a472 100644
--- a/packages/react-vis/package.json
+++ b/packages/react-vis/package.json
@@ -77,9 +77,9 @@
     "jsdom": "^9.9.1",
     "node-sass": "^4.9.3",
     "prettier": "^1.14.2",
-    "react": "^16.0.0",
+    "react": "^17.0.2",
     "react-addons-test-utils": ">=15.4.2",
-    "react-dom": "^16.0.0",
+    "react-dom": "^17.0.2",
     "react-test-renderer": "^16.13.1",
     "react-vis-showcase": "^0.1.0",
     "regenerator-runtime": "^0.13.11",
@@ -88,8 +88,8 @@
     "uglify-js": "^2.8.22"
   },
   "peerDependencies": {
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "keywords": [
     "d3",
diff --git a/packages/react-vis/src/animation.js b/packages/react-vis/src/animation.js
index 5012b09d0..6f9428693 100644
--- a/packages/react-vis/src/animation.js
+++ b/packages/react-vis/src/animation.js
@@ -59,7 +59,7 @@ class Animation extends PureComponent {
     this._updateInterpolator(props);
   }
 
-  UNSAFE_componentWillUpdate(props) {
+  componentDidUpdate(props) {
     this._updateInterpolator(this.props, props);
     if (props.onStart) {
       props.onStart();
diff --git a/packages/react-vis/src/plot/xy-plot.js b/packages/react-vis/src/plot/xy-plot.js
index 06a668956..bbb8f16b1 100644
--- a/packages/react-vis/src/plot/xy-plot.js
+++ b/packages/react-vis/src/plot/xy-plot.js
@@ -139,16 +139,16 @@ class XYPlot extends React.Component {
     const children = getSeriesChildren(props.children);
     const data = getStackedData(children, stackBy);
     this.state = {
-      scaleMixins: this._getScaleMixins(data, props),
+      scaleMixins: XYPlot._getScaleMixins(data, props),
       data
     };
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  static getDerivedStateFromProps(nextProps) {
     const children = getSeriesChildren(nextProps.children);
     const nextData = getStackedData(children, nextProps.stackBy);
     const {scaleMixins} = this.state;
-    const nextScaleMixins = this._getScaleMixins(nextData, nextProps);
+    const nextScaleMixins = XYPlot._getScaleMixins(nextData, nextProps);
     if (
       !checkIfMixinsAreEqual(
         nextScaleMixins,
@@ -156,11 +156,13 @@ class XYPlot extends React.Component {
         nextProps.hasTreeStructure
       )
     ) {
-      this.setState({
+      return {
         scaleMixins: nextScaleMixins,
         data: nextData
-      });
+      };
     }
+
+    return null;
   }
 
   /**
@@ -231,7 +233,7 @@ class XYPlot extends React.Component {
    * @returns {Object} Defaults.
    * @private
    */
-  _getDefaultScaleProps(props) {
+  static _getDefaultScaleProps(props) {
     const {innerWidth, innerHeight} = getInnerDimensions(
       props,
       DEFAULT_MARGINS
@@ -262,11 +264,11 @@ class XYPlot extends React.Component {
    * @returns {Object} Map of scale-related props.
    * @private
    */
-  _getScaleMixins(data, props) {
+  static _getScaleMixins(data, props) {
     const filteredData = data.filter(d => d);
     const allData = [].concat(...filteredData);
 
-    const defaultScaleProps = this._getDefaultScaleProps(props);
+    const defaultScaleProps = XYPlot._getDefaultScaleProps(props);
     const optionalScaleProps = getOptionalScaleProps(props);
     const userScaleProps = extractScalePropsFromProps(props, ATTRIBUTES);
     const missingScaleProps = getMissingScaleProps(
diff --git a/packages/showcase/package.json b/packages/showcase/package.json
index 1c4388971..854257cc8 100644
--- a/packages/showcase/package.json
+++ b/packages/showcase/package.json
@@ -23,8 +23,8 @@
   "dependencies": {
     "d3-force": "^1.0.6",
     "d3-random": "^1.1.0",
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-vis": "^1.11.7"