Remove componentWillReceiveProps

components/color-picker/index.jsx

@@ -266,28 +266,31 @@ class ColorPicker extends React.Component {
 		checkProps(COLOR_PICKER, props, componentDoc);
 	}
 
-	// use getDerivedStateFromProps when available
-	componentWillReceiveProps(nextProps) {
+	componentDidUpdate(prevProps) {
+		// The following are only present to allow props to update the state if they get out of sync (for instance, the external store is updated).
 		const nextState = {};
 
-		if (nextProps.value) {
-			nextState.currentColor = nextProps.value;
+		if (this.props.value !== prevProps.value) {
+			nextState.currentColor = this.props.value;
 		}
 
-		if (nextProps.valueWorking) {
+		if (this.props.valueWorking !== prevProps.valueWorking) {
 			nextState.workingColor = ColorUtils.getNewColor(
 				{
-					hex: nextProps.valueWorking,
+					hex: this.props.valueWorking,
 				},
 				this.props.events.onValidateWorkingColor
 			);
 		}
 
-		if (nextProps.disabled !== undefined) {
-			nextState.disabled = nextProps.disabled;
+		if (this.props.disabled !== prevProps.disabled) {
+			nextState.disabled = this.props.disabled;
 		}
 
-		this.setState(nextState);
+		if (Object.entries(nextState).length !== 0) {
+			// eslint-disable-next-line react/no-did-update-set-state
+			this.setState(nextState);
+		}
 	}
 
 	getInput({ labels }) {

components/combobox/combobox.jsx

@@ -439,7 +439,7 @@ class Combobox extends React.Component {
 	 * Lifecycle methods
 	 */
 
-	componentWillReceiveProps(nextProps) {
+	componentDidUpdate(nextProps) {
 		// This logic will maintain the active highlight even when the
 		// option order changes. One example would be the server pushes
 		// data out as the user has the menu open. This logic clears
@@ -451,11 +451,14 @@ class Combobox extends React.Component {
 				isEqual(item, this.state.activeOption)
 			);
 			if (index !== -1) {
+				// eslint-disable-next-line react/no-did-update-set-state
 				this.setState({ activeOptionIndex: index });
 			} else {
+				// eslint-disable-next-line react/no-did-update-set-state
 				this.setState({ activeOption: undefined, activeOptionIndex: -1 });
 			}
 		} else if (this.props.isOpen !== nextProps.isOpen) {
+			// eslint-disable-next-line react/no-did-update-set-state
 			this.setState({ isOpen: nextProps.isOpen });
 		}
 
@@ -466,27 +469,12 @@ class Combobox extends React.Component {
 			this.props.selection.length === 0 &&
 			nextProps.selection.length > 0;
 		if (selectedOptionsRenderIsInitialRender) {
+			// eslint-disable-next-line react/no-did-update-set-state
 			this.setState({
 				activeSelectedOption: nextProps.selection[0],
 				activeSelectedOptionIndex: 0,
 			});
 		}
-
-		// changes pill focus to last item in the list if the selection length has changed
-		if (nextProps.selection.length > this.props.selection.length) {
-			if (nextProps.selection.length < 1) {
-				this.setState({
-					activeSelectedOption: undefined,
-					activeSelectedOptionIndex: 0,
-				});
-			} else {
-				this.setState({
-					activeSelectedOption:
-						nextProps.selection[nextProps.selection.length - 1],
-					activeSelectedOptionIndex: nextProps.selection.length - 1,
-				});
-			}
-		}
 	}
 
 	componentWillUnmount() {

components/component-docs.json

@@ -17288,26 +17288,6 @@
     "tree": {
         "description": "A tree is visualization of a structure hierarchy. A branch can be expanded or collapsed. This is a controlled component, since visual state is present in the `nodes` data.",
         "methods": [
-            {
-                "name": "flattenTree",
-                "docblock": null,
-                "modifiers": [],
-                "params": [
-                    {
-                        "name": "root",
-                        "type": null
-                    },
-                    {
-                        "name": "treeIndex",
-                        "type": null
-                    },
-                    {
-                        "name": "firstLevel",
-                        "type": null
-                    }
-                ],
-                "returns": null
-            },
             {
                 "name": "handleSelect",
                 "docblock": null,
@@ -17401,7 +17381,7 @@
                 "required": false,
                 "description": "A function that will be called by every branch to receive its child nodes. The parent `node` object with the branch data is passed into this function: `getNodes(node)`. If your state engine is Flux or Redux, then your tree data structure will probably be flattened or normalized within the store. This will allow you to build out your tree without transversing an actual tree of data and may be more performant.",
                 "defaultValue": {
-                    "value": "(node) => node.nodes",
+                    "value": "(node) => {console.log(node.nodes); return node.nodes}",
                     "computed": false
                 }
             },

components/date-picker/date-picker.jsx

@@ -274,12 +274,13 @@ class Datepicker extends React.Component {
 		checkProps(DATE_PICKER, props, componentDoc);
 	}
 
-	componentWillReceiveProps(nextProps) {
+	componentDidUpdate(nextProps) {
 		if (nextProps.value && this.props.value) {
 			const currentDate = this.props.value.getTime();
 			const nextDate = nextProps.value.getTime();
 
 			if (currentDate !== nextDate) {
+				// eslint-disable-next-line react/no-did-update-set-state
 				this.setState({
 					value: nextProps.value,
 					formattedValue: this.props.formatter(nextProps.value),

components/lookup/footer.jsx

@@ -13,7 +13,8 @@ const propTypes = {};
 const defaultProps = {};
 
 class DefaultFooter extends React.Component {
-	componentWillReceiveProps(nextProps) {
+	// eslint-disable-next-line react/sort-comp, camelcase
+	UNSAFE_componentWillReceiveProps(nextProps) {
 		if (
 			nextProps.isActive !== this.props.isActive &&
 			nextProps.isActive === true

components/lookup/header.jsx

@@ -13,7 +13,8 @@ const propTypes = {};
 const defaultProps = {};
 
 class DefaultHeader extends React.Component {
-	componentWillReceiveProps(nextProps) {
+	// eslint-disable-next-line camelcase, react/sort-comp
+	UNSAFE_componentWillReceiveProps(nextProps) {
 		if (
 			nextProps.isActive !== this.props.isActive &&
 			nextProps.isActive === true

components/lookup/lookup.jsx

@@ -239,7 +239,8 @@ const Lookup = class extends React.Component {
 		this.modifyItems(this.props.options);
 	}
 
-	componentWillReceiveProps(newProps) {
+	// eslint-disable-next-line camelcase, react/sort-comp
+	UNSAFE_componentWillReceiveProps(newProps) {
 		if (newProps.options) {
 			this.modifyItems(newProps.options);
 		}

components/lookup/private/item.jsx

@@ -27,7 +27,8 @@ const propTypes = {
 };
 
 class Item extends React.Component {
-	componentWillReceiveProps(nextProps) {
+	// eslint-disable-next-line camelcase, react/sort-comp
+	UNSAFE_componentWillReceiveProps(nextProps) {
 		if (
 			nextProps.isActive !== this.props.isActive &&
 			nextProps.isActive === true

components/menu-dropdown/menu-dropdown.jsx

@@ -13,6 +13,7 @@ import classNames from 'classnames';
 
 // ### isFunction
 import isFunction from 'lodash.isfunction';
+import isEqual from 'lodash.isequal';
 
 import shortid from 'shortid';
 
@@ -447,18 +448,19 @@ class MenuDropdown extends React.Component {
 		this.navigableItems = getNavigableItems(props.options);
 	}
 
-	componentWillReceiveProps(nextProps, prevProps) {
-		if (prevProps.value !== nextProps.value) {
-			const nextState = this.getCurrentSelectedIndices(nextProps);
+	componentDidUpdate(prevProps) {
+		if (prevProps.value !== this.props.value) {
+			const nextState = this.getCurrentSelectedIndices(prevProps);
+			// eslint-disable-next-line react/no-did-update-set-state
 			this.setState(nextState);
 		}
 
-		if (prevProps.isOpen !== nextProps.isOpen) {
+		if (prevProps.isOpen !== this.props.isOpen) {
 			this.setFocus();
 		}
 
-		if (nextProps.options) {
-			this.navigableItems = getNavigableItems(nextProps.options);
+		if (!isEqual(prevProps.options, this.props.options)) {
+			this.navigableItems = getNavigableItems(prevProps.options);
 		}
 	}
 

components/menu-picklist/index.jsx

@@ -226,7 +226,8 @@ const MenuPicklist = createReactClass({
 		this.navigableItems = getNavigableItems(this.props.options);
 	},
 
-	componentWillReceiveProps(nextProps) {
+	// eslint-disable-next-line camelcase, react/sort-comp
+	UNSAFE_componentWillReceiveProps(nextProps) {
 		if (
 			this.props.value !== nextProps.value ||
 			this.props.options.length !== nextProps.length

components/notification/index.jsx

@@ -73,7 +73,8 @@ class Notification extends React.Component {
 		}
 	}
 
-	componentWillReceiveProps(nextProps) {
+	// eslint-disable-next-line camelcase, react/sort-comp
+	UNSAFE_componentWillReceiveProps(nextProps) {
 		if (nextProps.duration) {
 			if (this.timeout) {
 				clearTimeout(this.timeout);

components/time-picker/index.jsx

@@ -166,7 +166,8 @@ class Timepicker extends React.Component {
 		checkProps(TIME_PICKER, props, componentDoc);
 	}
 
-	componentWillReceiveProps(nextProps) {
+	// eslint-disable-next-line camelcase, react/sort-comp
+	UNSAFE_componentWillReceiveProps(nextProps) {
 		if (nextProps.value && this.props.value) {
 			const currentTime = this.props.value.getTime();
 			const nextTime = nextProps.value.getTime();

components/tree/__tests__/tree.browser-test.jsx

@@ -5,7 +5,6 @@
 
 import React from 'react';
 
-import isEqual from 'lodash.isequal';
 import chai, { expect } from 'chai';
 import chaiEnzyme from 'chai-enzyme';
 // `this.wrapper` and `this.dom` is set in the helpers file
@@ -262,39 +261,6 @@ describe('Tree: ', () => {
 		});
 	});
 
-	describe('getNodes is called correctly on initial tree', () => {
-		const getNodes = (node) =>
-			node.nodes
-				? node.nodes.map(
-						(id) => sampleNodesDynamicHashMap.initialExpandedSelected[id]
-					)
-				: [];
-		const getNodesSpy = sinon.spy(getNodes);
-
-		beforeEach(
-			mountComponent(
-				<DefaultExample
-					getNodes={getNodesSpy}
-					log={() => {}}
-					nodes={sampleNodesDynamicHashMap.initialExpandedSelected}
-				/>
-			)
-		);
-
-		afterEach(unmountComponent);
-
-		it('getNodes passes in correct node and is called 18 times (all branches twice + root branch) on initial tree', () => {
-			const nodeCallbackParameter = getNodesSpy.args[0][0];
-			expect(
-				isEqual(
-					nodeCallbackParameter.nodes,
-					sampleNodesDynamicHashMap.initialExpandedSelected[0].nodes
-				)
-			).is.true;
-			expect(getNodesSpy.callCount).to.equal(18);
-		});
-	});
-
 	describe('Search term is highlighted', () => {
 		beforeEach(
 			mountComponent(<DefaultExample log={() => {}} searchTerm="fruit" />)