React 16.13

.circleci/config.yml

@@ -81,7 +81,7 @@ jobs:
           command: |
             . venv/bin/activate && mkdir packages
             # build main dash
-            git clone --depth 1 https://github.com/plotly/dash.git dash-main
+            git clone --depth 1 -b react-16.13 https://github.com/plotly/dash.git dash-main
             cd dash-main && pip install -e .[dev] --progress-bar off && python setup.py sdist && mv dist/* ../packages/
             cd dash-renderer && npm run build
             python setup.py sdist && mv dist/* ../../packages/ && cd ../..

CHANGELOG.md

@@ -2,6 +2,11 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Changed
+- [#766](https://github.com/plotly/dash-core-components/pull/766) Update from React 16.8.6 to 16.13.0
+
+
 ## [1.8.1] -2020-02-27
 ### Added
 - [#760](https://github.com/plotly/dash-core-components/pull/760) Added R examples to package help

package.json

@@ -80,8 +80,8 @@
     "jest": "^24.5.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.14.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "16.13.0",
+    "react-dom": "16.13.0",
     "react-jsx-parser": "^1.21.0",
     "react-resize-detector": "^4.2.1",
     "style-loader": "^0.23.1",

src/components/Graph.react.js

@@ -42,7 +42,7 @@ class PlotlyGraph extends Component {
         });
     }
 
-    componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
         let extendData = this.state.extendData.slice(0);
 
         if (this.props.figure !== nextProps.figure) {

src/components/Input.react.js

@@ -30,7 +30,7 @@ export default class Input extends PureComponent {
         this.setPropValue = this.setPropValue.bind(this);
     }
 
-    componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
         const {value} = this.input.current;
         const valueAsNumber = convert(value);
         this.setInputValue(
@@ -51,7 +51,7 @@ export default class Input extends PureComponent {
         );
     }
 
-    componentWillMount() {
+    UNSAFE_componentWillMount() {
         if (this.props.type !== 'number') {
             this.setState({value: this.props.value});
         }

src/components/Interval.react.js

@@ -62,7 +62,7 @@ export default class Interval extends Component {
         this.handleTimer(this.props);
     }
 
-    componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
         if (nextProps.interval !== this.props.interval) {
             this.resetTimer(nextProps);
         } else {

src/components/Location.react.js

@@ -106,7 +106,7 @@ export default class Location extends Component {
         this.updateLocation(this.props);
     }
 
-    componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
         this.updateLocation(nextProps);
     }
 

src/components/Store.react.js

@@ -143,7 +143,7 @@ export default class Store extends React.Component {
         }
     }
 
-    componentWillMount() {
+    UNSAFE_componentWillMount() {
         const {setProps, id, data, storage_type} = this.props;
         if (storage_type !== 'memory') {
             window.addEventListener('storage', this.onStorageChange);

src/fragments/DatePickerRange.react.js

@@ -35,11 +35,11 @@ export default class DatePickerRange extends Component {
         }
     }
 
-    componentWillReceiveProps(newProps) {
+    UNSAFE_componentWillReceiveProps(newProps) {
         this.propsToState(newProps);
     }
 
-    componentWillMount() {
+    UNSAFE_componentWillMount() {
         this.propsToState(this.props, true);
     }
 

src/fragments/Dropdown.react.js

@@ -32,7 +32,7 @@ export default class Dropdown extends Component {
         };
     }
 
-    componentWillReceiveProps(newProps) {
+    UNSAFE_componentWillReceiveProps(newProps) {
         if (newProps.options !== this.props.options) {
             this.setState({
                 filterOptions: createFilterOptions({

src/fragments/Graph.react.js

@@ -370,7 +370,7 @@ class PlotlyGraph extends Component {
         );
     }
 
-    componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
         const idChanged = this.props.id !== nextProps.id;
         if (idChanged) {
             /*

src/fragments/RangeSlider.react.js

@@ -26,7 +26,7 @@ export default class RangeSlider extends Component {
         }
     }
 
-    componentWillReceiveProps(newProps) {
+    UNSAFE_componentWillReceiveProps(newProps) {
         if (newProps.tooltip !== this.props.tooltip) {
             this.DashSlider = newProps.tooltip
                 ? createSliderWithTooltip(Range)
@@ -35,7 +35,7 @@ export default class RangeSlider extends Component {
         this.propsToState(newProps);
     }
 
-    componentWillMount() {
+    UNSAFE_componentWillMount() {
         this.propsToState(this.props);
     }
 

src/fragments/Slider.react.js

@@ -29,7 +29,7 @@ export default class Slider extends Component {
         }
     }
 
-    componentWillReceiveProps(newProps) {
+    UNSAFE_componentWillReceiveProps(newProps) {
         if (newProps.tooltip !== this.props.tooltip) {
             this.DashSlider = newProps.tooltip
                 ? createSliderWithTooltip(ReactSlider)
@@ -38,7 +38,7 @@ export default class Slider extends Component {
         this.propsToState(newProps);
     }
 
-    componentWillMount() {
+    UNSAFE_componentWillMount() {
         this.propsToState(this.props);
     }