Remove usages of UNSAFE React methods

.changeset/purple-moons-promise.md

@@ -0,0 +1,5 @@
+---
+"react-select": major
+---
+
+Removed usages of UNSAFE React methods

packages/react-select/src/Async.js

@@ -50,6 +50,9 @@ type State = {
   loadedInputValue?: string,
   loadedOptions: OptionsType,
   passEmptyOptions: boolean,
+  optionsCache: { [string]: OptionsType },
+  prevDefaultOptions: OptionsType | boolean | void,
+  prevCacheOptions: any | void,
 };
 
 export const makeAsyncSelect = <C: {}>(
@@ -60,7 +63,6 @@ export const makeAsyncSelect = <C: {}>(
     select: ElementRef<*>;
     lastRequest: {};
     mounted: boolean = false;
-    optionsCache: { [string]: OptionsType } = {};
     constructor(props: C & AsyncProps) {
       super();
       this.state = {
@@ -72,6 +74,31 @@ export const makeAsyncSelect = <C: {}>(
         isLoading: props.defaultOptions === true,
         loadedOptions: [],
         passEmptyOptions: false,
+        optionsCache: {},
+        prevDefaultOptions: undefined,
+        prevCacheOptions: undefined,
+      };
+    }
+    static getDerivedStateFromProps(props: C & AsyncProps, state: State) {
+      const newCacheOptionsState =
+        props.cacheOptions !== state.prevCacheOptions
+          ? {
+              prevCacheOptions: props.cacheOptions,
+              optionsCache: {},
+            }
+          : {};
+      const newDefaultOptionsState =
+        props.defaultOptions !== state.prevDefaultOptions
+          ? {
+              prevDefaultOptions: props.defaultOptions,
+              defaultOptions: Array.isArray(props.defaultOptions)
+                ? props.defaultOptions
+                : undefined,
+            }
+          : {};
+      return {
+        ...newCacheOptionsState,
+        ...newDefaultOptionsState,
       };
     }
     componentDidMount() {
@@ -86,19 +113,6 @@ export const makeAsyncSelect = <C: {}>(
         });
       }
     }
-    UNSAFE_componentWillReceiveProps(nextProps: C & AsyncProps) {
-      // if the cacheOptions prop changes, clear the cache
-      if (nextProps.cacheOptions !== this.props.cacheOptions) {
-        this.optionsCache = {};
-      }
-      if (nextProps.defaultOptions !== this.props.defaultOptions) {
-        this.setState({
-          defaultOptions: Array.isArray(nextProps.defaultOptions)
-            ? nextProps.defaultOptions
-            : undefined,
-        });
-      }
-    }
     componentWillUnmount() {
       this.mounted = false;
     }
@@ -131,11 +145,11 @@ export const makeAsyncSelect = <C: {}>(
         });
         return;
       }
-      if (cacheOptions && this.optionsCache[inputValue]) {
+      if (cacheOptions && this.state.optionsCache[inputValue]) {
         this.setState({
           inputValue,
           loadedInputValue: inputValue,
-          loadedOptions: this.optionsCache[inputValue],
+          loadedOptions: this.state.optionsCache[inputValue],
           isLoading: false,
           passEmptyOptions: false,
         });
@@ -150,17 +164,17 @@ export const makeAsyncSelect = <C: {}>(
           () => {
             this.loadOptions(inputValue, options => {
               if (!this.mounted) return;
-              if (options) {
-                this.optionsCache[inputValue] = options;
-              }
               if (request !== this.lastRequest) return;
               delete this.lastRequest;
-              this.setState({
+              this.setState(state => ({
                 isLoading: false,
                 loadedInputValue: inputValue,
                 loadedOptions: options || [],
                 passEmptyOptions: false,
-              });
+                optionsCache: options
+                  ? { ...state.optionsCache, [inputValue]: options }
+                  : state.optionsCache,
+              }));
             });
           }
         );

packages/react-select/src/Creatable.js

@@ -99,7 +99,7 @@ export const makeCreatableSelect = <C: {}>(
         options: options,
       };
     }
-    UNSAFE_componentWillReceiveProps(nextProps: CreatableProps & C) {
+    static getDerivedStateFromProps(props: CreatableProps & C, state: State) {
       const {
         allowCreateWhileLoading,
         createOptionPosition,
@@ -109,23 +109,23 @@ export const makeCreatableSelect = <C: {}>(
         isLoading,
         isValidNewOption,
         value,
-      } = nextProps;
-      const options = nextProps.options || [];
-      let { newOption } = this.state;
+      } = props;
+      const options = props.options || [];
+      let { newOption } = state;
       if (isValidNewOption(inputValue, cleanValue(value), options)) {
         newOption = getNewOptionData(inputValue, formatCreateLabel(inputValue));
       } else {
         newOption = undefined;
       }
-      this.setState({
+      return {
         newOption: newOption,
         options:
           (allowCreateWhileLoading || !isLoading) && newOption
             ? createOptionPosition === 'first'
               ? [newOption, ...options]
               : [...options, newOption]
             : options,
-      });
+      };
     }
     onChange = (newValue: ValueType, actionMeta: ActionMeta) => {
       const {