partial completion of replacing componentWillReceiveProps

app/soapbox/components/autosuggest_input.js

@@ -153,10 +153,13 @@ export default class AutosuggestInput extends ImmutablePureComponent {
     this.input.focus();
   }
 
-  componentWillReceiveProps(nextProps) {
+  static getDerivedStateFromProps(nextProps, state) {
-    if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden && this.state.focused) {
+    if (nextProps.suggestions && nextProps.suggestions.size > 0 && state.suggestionsHidden && state.focused) {
-      this.setState({ suggestionsHidden: false });
+      return {
+        suggestionsHidden: false,
+      };
     }
+    return null;
   }
 
   setInput = (c) => {

app/soapbox/components/autosuggest_textarea.js

@@ -159,10 +159,13 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
     this.textarea.focus();
   }
 
-  componentWillReceiveProps(nextProps) {
+  static getDerivedStateFromProps(nextProps, state) {
-    if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden && this.state.focused) {
+    if (nextProps.suggestions && nextProps.suggestions.size > 0 && state.suggestionsHidden && state.focused) {
-      this.setState({ suggestionsHidden: false });
+      return {
+        suggestionsHidden: false,
+      };
     }
+    return null;
   }
 
   setTextarea = (c) => {

app/soapbox/components/media_gallery.js

@@ -267,15 +267,21 @@ class MediaGallery extends React.PureComponent {
   state = {
     visible: this.props.visible !== undefined ? this.props.visible : (this.props.displayMedia !== 'hide_all' && !this.props.sensitive || this.props.displayMedia === 'show_all'),
     width: this.props.defaultWidth,
+    media: this.props.media,
+    displayMedia: this.props.displayMedia,
   };
 
-  componentWillReceiveProps(nextProps) {
+  static getDerivedStateFromProps(nextProps, state) {
-    const { displayMedia } = this.props;
+    if (!is(nextProps.media, state.media) && nextProps.visible === undefined) {
-    if (!is(nextProps.media, this.props.media) && nextProps.visible === undefined) {
+      return {
-      this.setState({ visible: displayMedia !== 'hide_all' && !nextProps.sensitive || displayMedia === 'show_all' });
+        visible: state.displayMedia !== 'hide_all' && !nextProps.sensitive || state.displayMedia === 'show_all',
-    } else if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
+      };
-      this.setState({ visible: nextProps.visible });
+    } else if (!is(nextProps.visible, state.visible) && nextProps.visible !== undefined) {
+      return {
+        visible: nextProps.visible,
+      };
     }
+    return null;
   }
 
   handleOpen = () => {

app/soapbox/components/modal_root.js

@@ -78,21 +78,18 @@ class ModalRoot extends React.PureComponent {
     window.addEventListener('keyup', this.handleKeyUp, false);
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps, prevProps) {
     if (!!nextProps.children && !this.props.children) {
       this.activeElement = document.activeElement;
-
       this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true));
     } else if (!nextProps.children) {
       this.setState({ revealed: false });
     }
     if (!nextProps.children && !!this.props.children) {
+      this.activeElement = document.activeElement;
       this.activeElement.focus();
       this.activeElement = null;
     }
-  }
-
-  componentDidUpdate(prevProps) {
     if (!this.props.children && !!prevProps.children) {
       this.getSiblings().forEach(sibling => sibling.removeAttribute('inert'));
     }