diff --git a/app/soapbox/components/autosuggest_input.js b/app/soapbox/components/autosuggest_input.js
index 3136325a0..8b4180b5b 100644
--- a/app/soapbox/components/autosuggest_input.js
+++ b/app/soapbox/components/autosuggest_input.js
@@ -153,10 +153,13 @@ export default class AutosuggestInput extends ImmutablePureComponent {
     this.input.focus();
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden && this.state.focused) {
-      this.setState({ suggestionsHidden: false });
+  static getDerivedStateFromProps(nextProps, state) {
+    if (nextProps.suggestions && nextProps.suggestions.size > 0 && state.suggestionsHidden && state.focused) {
+      return {
+        suggestionsHidden: false,
+      };
     }
+    return null;
   }
 
   setInput = (c) => {
diff --git a/app/soapbox/components/autosuggest_textarea.js b/app/soapbox/components/autosuggest_textarea.js
index cae6116d4..4f686ac37 100644
--- a/app/soapbox/components/autosuggest_textarea.js
+++ b/app/soapbox/components/autosuggest_textarea.js
@@ -159,10 +159,13 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
     this.textarea.focus();
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden && this.state.focused) {
-      this.setState({ suggestionsHidden: false });
+  static getDerivedStateFromProps(nextProps, state) {
+    if (nextProps.suggestions && nextProps.suggestions.size > 0 && state.suggestionsHidden && state.focused) {
+      return {
+        suggestionsHidden: false,
+      };
     }
+    return null;
   }
 
   setTextarea = (c) => {
diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js
index 92886b715..dfe853ebc 100644
--- a/app/soapbox/components/media_gallery.js
+++ b/app/soapbox/components/media_gallery.js
@@ -234,15 +234,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) {
-    const { displayMedia } = this.props;
-    if (!is(nextProps.media, this.props.media) && nextProps.visible === undefined) {
-      this.setState({ visible: displayMedia !== 'hide_all' && !nextProps.sensitive || displayMedia === 'show_all' });
-    } else if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
-      this.setState({ visible: nextProps.visible });
+  static getDerivedStateFromProps(nextProps, state) {
+    if (!is(nextProps.media, state.media) && nextProps.visible === undefined) {
+      return {
+        visible: state.displayMedia !== 'hide_all' && !nextProps.sensitive || state.displayMedia === 'show_all',
+      };
+    } else if (!is(nextProps.visible, state.visible) && nextProps.visible !== undefined) {
+      return {
+        visible: nextProps.visible,
+      };
     }
+    return null;
   }
 
   handleOpen = () => {
diff --git a/app/soapbox/components/modal_root.js b/app/soapbox/components/modal_root.js
index 17cdaa64a..9857ad616 100644
--- a/app/soapbox/components/modal_root.js
+++ b/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'));
     }
diff --git a/app/soapbox/components/relative_timestamp.js b/app/soapbox/components/relative_timestamp.js
index b67426c40..1b6e6483b 100644
--- a/app/soapbox/components/relative_timestamp.js
+++ b/app/soapbox/components/relative_timestamp.js
@@ -137,7 +137,7 @@ class RelativeTimestamp extends React.Component {
       this.state.now !== nextState.now;
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (this.props.timestamp !== nextProps.timestamp) {
       this.setState({ now: Date.now() });
     }
diff --git a/app/soapbox/features/account_gallery/index.js b/app/soapbox/features/account_gallery/index.js
index de2213b07..0b55a0cb0 100644
--- a/app/soapbox/features/account_gallery/index.js
+++ b/app/soapbox/features/account_gallery/index.js
@@ -97,7 +97,7 @@ class AccountGallery extends ImmutablePureComponent {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (nextProps.accountId && nextProps.accountId !== -1 && (nextProps.accountId !== this.props.accountId && nextProps.accountId)) {
       this.props.dispatch(fetchAccount(nextProps.params.accountId));
       this.props.dispatch(expandAccountMediaTimeline(nextProps.accountId));
diff --git a/app/soapbox/features/account_timeline/index.js b/app/soapbox/features/account_timeline/index.js
index 99ef9af94..31f5f9175 100644
--- a/app/soapbox/features/account_timeline/index.js
+++ b/app/soapbox/features/account_timeline/index.js
@@ -81,7 +81,7 @@ class AccountTimeline extends ImmutablePureComponent {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     const { me } = nextProps;
     if (nextProps.accountId && nextProps.accountId !== -1 && (nextProps.accountId !== this.props.accountId && nextProps.accountId) || nextProps.withReplies !== this.props.withReplies) {
       this.props.dispatch(fetchAccount(nextProps.accountId));
diff --git a/app/soapbox/features/compose/components/emoji_picker_dropdown.js b/app/soapbox/features/compose/components/emoji_picker_dropdown.js
index f88df3a49..dc3ec4c7f 100644
--- a/app/soapbox/features/compose/components/emoji_picker_dropdown.js
+++ b/app/soapbox/features/compose/components/emoji_picker_dropdown.js
@@ -56,7 +56,7 @@ class ModifierPickerMenu extends React.PureComponent {
     this.props.onSelect(e.currentTarget.getAttribute('data-index') * 1);
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (nextProps.active) {
       this.attachListeners();
     } else {
diff --git a/app/soapbox/features/favourites/index.js b/app/soapbox/features/favourites/index.js
index db5cbef49..70f9aa55d 100644
--- a/app/soapbox/features/favourites/index.js
+++ b/app/soapbox/features/favourites/index.js
@@ -27,7 +27,7 @@ class Favourites extends ImmutablePureComponent {
     this.props.dispatch(fetchFavourites(this.props.params.statusId));
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
       this.props.dispatch(fetchFavourites(nextProps.params.statusId));
     }
diff --git a/app/soapbox/features/followers/index.js b/app/soapbox/features/followers/index.js
index 87a60272d..2ba02c4af 100644
--- a/app/soapbox/features/followers/index.js
+++ b/app/soapbox/features/followers/index.js
@@ -69,7 +69,7 @@ class Followers extends ImmutablePureComponent {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (nextProps.accountId && nextProps.accountId !== -1 && (nextProps.accountId !== this.props.accountId && nextProps.accountId)) {
       this.props.dispatch(fetchAccount(nextProps.accountId));
       this.props.dispatch(fetchFollowers(nextProps.accountId));
diff --git a/app/soapbox/features/following/index.js b/app/soapbox/features/following/index.js
index f3d404a23..f2bab4c06 100644
--- a/app/soapbox/features/following/index.js
+++ b/app/soapbox/features/following/index.js
@@ -69,7 +69,7 @@ class Following extends ImmutablePureComponent {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (nextProps.accountId && nextProps.accountId !== -1 && (nextProps.accountId !== this.props.accountId && nextProps.accountId)) {
       this.props.dispatch(fetchAccount(nextProps.accountId));
       this.props.dispatch(fetchFollowing(nextProps.accountId));
diff --git a/app/soapbox/features/groups/edit/index.js b/app/soapbox/features/groups/edit/index.js
index a11d64a6f..ef917e850 100644
--- a/app/soapbox/features/groups/edit/index.js
+++ b/app/soapbox/features/groups/edit/index.js
@@ -62,7 +62,7 @@ class Edit extends React.PureComponent {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (!this.props.group && nextProps.group) {
       this.props.setUp(nextProps.group);
     }
diff --git a/app/soapbox/features/groups/members/index.js b/app/soapbox/features/groups/members/index.js
index 0fa713906..7b3e24b01 100644
--- a/app/soapbox/features/groups/members/index.js
+++ b/app/soapbox/features/groups/members/index.js
@@ -36,7 +36,7 @@ class GroupMembers extends ImmutablePureComponent {
     this.props.dispatch(fetchMembers(id));
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (nextProps.params.id !== this.props.params.id) {
       this.props.dispatch(fetchMembers(nextProps.params.id));
     }
diff --git a/app/soapbox/features/groups/removed_accounts/index.js b/app/soapbox/features/groups/removed_accounts/index.js
index 3f49c3546..622e57900 100644
--- a/app/soapbox/features/groups/removed_accounts/index.js
+++ b/app/soapbox/features/groups/removed_accounts/index.js
@@ -43,7 +43,7 @@ class GroupRemovedAccounts extends ImmutablePureComponent {
     this.props.dispatch(fetchRemovedAccounts(id));
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (nextProps.params.id !== this.props.params.id) {
       this.props.dispatch(fetchRemovedAccounts(nextProps.params.id));
     }
diff --git a/app/soapbox/features/hashtag_timeline/index.js b/app/soapbox/features/hashtag_timeline/index.js
index c73c7ce35..c841aeea4 100644
--- a/app/soapbox/features/hashtag_timeline/index.js
+++ b/app/soapbox/features/hashtag_timeline/index.js
@@ -81,7 +81,7 @@ class HashtagTimeline extends React.PureComponent {
     dispatch(expandHashtagTimeline(id, { tags }));
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     const { dispatch, params } = this.props;
     const { id, tags } = nextProps.params;
 
diff --git a/app/soapbox/features/list_timeline/index.js b/app/soapbox/features/list_timeline/index.js
index 349052ab3..a606d90dc 100644
--- a/app/soapbox/features/list_timeline/index.js
+++ b/app/soapbox/features/list_timeline/index.js
@@ -50,7 +50,7 @@ class ListTimeline extends React.PureComponent {
     this.handleDisconnect();
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (nextProps.params.id !== this.props.params.id) {
       this.handleDisconnect();
       this.handleConnect(nextProps.params.id);
diff --git a/app/soapbox/features/reblogs/index.js b/app/soapbox/features/reblogs/index.js
index 5e65e6f30..47fd78463 100644
--- a/app/soapbox/features/reblogs/index.js
+++ b/app/soapbox/features/reblogs/index.js
@@ -41,7 +41,7 @@ class Reblogs extends ImmutablePureComponent {
     this.props.dispatch(fetchStatus(this.props.params.statusId));
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
       this.props.dispatch(fetchReblogs(nextProps.params.statusId));
       this.props.dispatch(fetchStatus(nextProps.params.statusId));
diff --git a/app/soapbox/features/search/components/header.js b/app/soapbox/features/search/components/header.js
index 02f7cd36e..82ccb46c6 100644
--- a/app/soapbox/features/search/components/header.js
+++ b/app/soapbox/features/search/components/header.js
@@ -21,7 +21,7 @@ class Header extends ImmutablePureComponent {
     submittedValue: '',
   };
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (nextProps.submitted) {
       const submittedValue = nextProps.value;
       this.setState({ submittedValue });
diff --git a/app/soapbox/features/status/components/card.js b/app/soapbox/features/status/components/card.js
index af2308461..bbca9db93 100644
--- a/app/soapbox/features/status/components/card.js
+++ b/app/soapbox/features/status/components/card.js
@@ -75,7 +75,7 @@ export default class Card extends React.PureComponent {
     embedded: false,
   };
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (!Immutable.is(this.props.card, nextProps.card)) {
       this.setState({ embedded: false });
     }
diff --git a/app/soapbox/features/status/index.js b/app/soapbox/features/status/index.js
index fbdadf191..b2f06ff0b 100644
--- a/app/soapbox/features/status/index.js
+++ b/app/soapbox/features/status/index.js
@@ -144,17 +144,6 @@ class Status extends ImmutablePureComponent {
     attachFullscreenListener(this.onFullScreenChange);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
-      this._scrolledIntoView = false;
-      this.props.dispatch(fetchStatus(nextProps.params.statusId));
-    }
-
-    if (nextProps.status && nextProps.status.get('id') !== this.state.loadedStatusId) {
-      this.setState({ showMedia: defaultMediaVisibility(nextProps.status), loadedStatusId: nextProps.status.get('id') });
-    }
-  }
-
   handleToggleMediaVisibility = () => {
     this.setState({ showMedia: !this.state.showMedia });
   }
@@ -401,7 +390,16 @@ class Status extends ImmutablePureComponent {
     this.node = c;
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(nextProps) {
+    if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
+      this._scrolledIntoView = false;
+      this.props.dispatch(fetchStatus(nextProps.params.statusId));
+    }
+
+    if (nextProps.status && nextProps.status.get('id') !== this.state.loadedStatusId) {
+      this.setState({ showMedia: defaultMediaVisibility(nextProps.status), loadedStatusId: nextProps.status.get('id') });
+    }
+
     if (this._scrolledIntoView) {
       return;
     }
diff --git a/app/soapbox/features/ui/components/bundle.js b/app/soapbox/features/ui/components/bundle.js
index 7089597b6..bbf3ad20b 100644
--- a/app/soapbox/features/ui/components/bundle.js
+++ b/app/soapbox/features/ui/components/bundle.js
@@ -37,7 +37,7 @@ class Bundle extends React.PureComponent {
     this.load(this.props);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.fetchComponent !== this.props.fetchComponent) {
       this.load(nextProps);
     }
diff --git a/app/soapbox/features/ui/components/focal_point_modal.js b/app/soapbox/features/ui/components/focal_point_modal.js
index 1b9246390..32c66a7f4 100644
--- a/app/soapbox/features/ui/components/focal_point_modal.js
+++ b/app/soapbox/features/ui/components/focal_point_modal.js
@@ -38,7 +38,7 @@ class FocalPointModal extends ImmutablePureComponent {
     this.updatePositionFromMedia(this.props.media);
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (this.props.media.get('id') !== nextProps.media.get('id')) {
       this.updatePositionFromMedia(nextProps.media);
     }
diff --git a/app/soapbox/features/ui/components/image_loader.js b/app/soapbox/features/ui/components/image_loader.js
index 02a0441fa..939886f17 100644
--- a/app/soapbox/features/ui/components/image_loader.js
+++ b/app/soapbox/features/ui/components/image_loader.js
@@ -42,7 +42,7 @@ export default class ImageLoader extends React.PureComponent {
     this.loadImage(this.props);
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (this.props.src !== nextProps.src) {
       this.loadImage(nextProps);
     }
diff --git a/app/soapbox/features/ui/components/report_modal.js b/app/soapbox/features/ui/components/report_modal.js
index fcd31afb1..dbe48f27f 100644
--- a/app/soapbox/features/ui/components/report_modal.js
+++ b/app/soapbox/features/ui/components/report_modal.js
@@ -83,7 +83,7 @@ class ReportModal extends ImmutablePureComponent {
     this.props.dispatch(expandAccountTimeline(this.props.account.get('id'), { withReplies: true }));
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (this.props.account !== nextProps.account && nextProps.account) {
       this.props.dispatch(expandAccountTimeline(nextProps.account.get('id'), { withReplies: true }));
     }
diff --git a/app/soapbox/features/video/index.js b/app/soapbox/features/video/index.js
index d49e08e65..490748274 100644
--- a/app/soapbox/features/video/index.js
+++ b/app/soapbox/features/video/index.js
@@ -291,7 +291,7 @@ class Video extends React.PureComponent {
     document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange, true);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
       this.setState({ revealed: nextProps.visible });
     }