diff --git a/src/chrome/LocationsButton.tsx b/src/chrome/LocationsButton.tsx
index e11be8052..e2e45d467 100644
--- a/src/chrome/LocationsButton.tsx
+++ b/src/chrome/LocationsButton.tsx
@@ -65,8 +65,9 @@ class LocationsButton extends Component<Props, State> {
     retreivingBookmarks: false,
   };
 
-  componentWillMount() {
+  componentDidMount() {
     document.addEventListener('keydown', this.keyDown);
+    this.updateBookmarks();
   }
 
   componentWillUnmount() {
@@ -101,10 +102,6 @@ class LocationsButton extends Component<Props, State> {
     });
   };
 
-  componentDidMount() {
-    this.updateBookmarks();
-  }
-
   render() {
     const {currentURI} = this.props;
     const {bookmarks} = this.state;
diff --git a/src/chrome/ScreenCaptureButtons.tsx b/src/chrome/ScreenCaptureButtons.tsx
index c9ccc07f4..d16cb516f 100644
--- a/src/chrome/ScreenCaptureButtons.tsx
+++ b/src/chrome/ScreenCaptureButtons.tsx
@@ -68,7 +68,7 @@ class ScreenCaptureButtons extends Component<Props, State> {
     this.checkIfRecordingIsAvailable();
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (nextProps.selectedDevice !== this.props.selectedDevice) {
       this.checkIfRecordingIsAvailable(nextProps);
     }
diff --git a/src/plugins/network/index.tsx b/src/plugins/network/index.tsx
index a46f58a55..5f568438c 100644
--- a/src/plugins/network/index.tsx
+++ b/src/plugins/network/index.tsx
@@ -420,7 +420,7 @@ class NetworkTable extends PureComponent<NetworkTableProps, NetworkTableState> {
     );
   }
 
-  componentWillReceiveProps(nextProps: NetworkTableProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: NetworkTableProps) {
     this.setState(calculateState(this.props, nextProps, this.state.sortedRows));
   }
 
diff --git a/src/ui/components/File.tsx b/src/ui/components/File.tsx
index d3d9250e7..b6eab8ce0 100644
--- a/src/ui/components/File.tsx
+++ b/src/ui/components/File.tsx
@@ -50,10 +50,11 @@ export default class File extends Component<FileProps, FileState> {
     encoding: 'utf8',
   };
 
-  componentWillReceiveProps(nextProps: FileProps) {
+  static getDerivedStateFromProps(nextProps: FileProps) {
     if (nextProps.buffer != null) {
-      this.setState({content: nextProps.buffer, loaded: true});
+      return {content: nextProps.buffer, loaded: true};
     }
+    return null;
   }
 
   componentDidMount() {
diff --git a/src/ui/components/FileList.tsx b/src/ui/components/FileList.tsx
index 4b496e137..c8cb62775 100644
--- a/src/ui/components/FileList.tsx
+++ b/src/ui/components/FileList.tsx
@@ -130,7 +130,7 @@ export default class FileList extends Component<FileListProps, FileListState> {
     });
   }
 
-  componentWillReceiveProps(nextProps: FileListProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: FileListProps) {
     if (nextProps.src !== this.props.src) {
       this.initialFetch(nextProps);
     }
diff --git a/src/ui/components/Orderable.tsx b/src/ui/components/Orderable.tsx
index 449407ebd..4aad52417 100644
--- a/src/ui/components/Orderable.tsx
+++ b/src/ui/components/Orderable.tsx
@@ -120,7 +120,7 @@ export default class Orderable extends React.Component<
     return !this.state.movingOrder;
   }
 
-  componentWillReceiveProps(nextProps: OrderableProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: OrderableProps) {
     this.setState({
       order: nextProps.order,
     });
diff --git a/src/ui/components/Sidebar.tsx b/src/ui/components/Sidebar.tsx
index f74ca9529..7506938b8 100644
--- a/src/ui/components/Sidebar.tsx
+++ b/src/ui/components/Sidebar.tsx
@@ -121,10 +121,14 @@ export default class Sidebar extends Component<SidebarProps, SidebarState> {
     position: 'left',
   };
 
-  componentWillReceiveProps(nextProps: SidebarProps) {
-    if (!this.state.userChange) {
-      this.setState({width: nextProps.width, height: nextProps.height});
+  static getDerivedStateFromProps(
+    nextProps: SidebarProps,
+    state: SidebarState,
+  ) {
+    if (!state.userChange) {
+      return {width: nextProps.width, height: nextProps.height};
     }
+    return null;
   }
 
   onResize = (width: number, height: number) => {
diff --git a/src/ui/components/elements-inspector/elements.tsx b/src/ui/components/elements-inspector/elements.tsx
index eba907fe9..06f5eda6c 100644
--- a/src/ui/components/elements-inspector/elements.tsx
+++ b/src/ui/components/elements-inspector/elements.tsx
@@ -464,15 +464,7 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
     };
   }
 
-  componentDidMount() {
-    this.setProps(this.props);
-  }
-
-  componentWillReceiveProps(nextProps: ElementsProps) {
-    this.setProps(nextProps);
-  }
-
-  setProps(props: ElementsProps) {
+  static getDerivedStateFromProps(props: ElementsProps) {
     const flatElements: FlatElements = [];
     const flatKeys: Array<ElementID> = [];
 
@@ -509,7 +501,7 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
       seed(props.root, 1);
     }
 
-    this.setState({flatElements, flatKeys, maxDepth});
+    return {flatElements, flatKeys, maxDepth};
   }
 
   selectElement = (key: ElementID) => {
diff --git a/src/ui/components/searchable/SearchableTable.tsx b/src/ui/components/searchable/SearchableTable.tsx
index c91142e28..2bbc83b9e 100644
--- a/src/ui/components/searchable/SearchableTable.tsx
+++ b/src/ui/components/searchable/SearchableTable.tsx
@@ -112,7 +112,7 @@ class SearchableManagedTable extends PureComponent<Props, State> {
     this.props.defaultFilters.map(this.props.addFilter);
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (
       nextProps.searchTerm !== this.props.searchTerm ||
       nextProps.regexEnabled != this.props.regexEnabled ||
diff --git a/src/ui/components/searchable/SearchableTable_immutable.tsx b/src/ui/components/searchable/SearchableTable_immutable.tsx
index 7c351cc7c..a49f3bb02 100644
--- a/src/ui/components/searchable/SearchableTable_immutable.tsx
+++ b/src/ui/components/searchable/SearchableTable_immutable.tsx
@@ -103,7 +103,7 @@ class SearchableManagedTable_immutable extends PureComponent<Props, State> {
     this.props.defaultFilters.map(this.props.addFilter);
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (
       nextProps.searchTerm !== this.props.searchTerm ||
       nextProps.regexEnabled != this.props.regexEnabled ||
diff --git a/src/ui/components/table/ManagedTable.tsx b/src/ui/components/table/ManagedTable.tsx
index 8d869b3c3..b10ce548e 100644
--- a/src/ui/components/table/ManagedTable.tsx
+++ b/src/ui/components/table/ManagedTable.tsx
@@ -208,7 +208,7 @@ export class ManagedTable extends React.Component<
     document.removeEventListener('keydown', this.onKeyDown);
   }
 
-  componentWillReceiveProps(nextProps: ManagedTableProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: ManagedTableProps) {
     // if columnSizes has changed
     if (nextProps.columnSizes !== this.props.columnSizes) {
       this.setState({
diff --git a/src/ui/components/table/ManagedTable_immutable.tsx b/src/ui/components/table/ManagedTable_immutable.tsx
index d29e8d1f0..cf591a7d7 100644
--- a/src/ui/components/table/ManagedTable_immutable.tsx
+++ b/src/ui/components/table/ManagedTable_immutable.tsx
@@ -204,7 +204,7 @@ class ManagedTable extends React.Component<
     document.removeEventListener('keydown', this.onKeyDown);
   }
 
-  componentWillReceiveProps(nextProps: ManagedTableProps_immutable) {
+  UNSAFE_componentWillReceiveProps(nextProps: ManagedTableProps_immutable) {
     // if columnSizes has changed
     if (nextProps.columnSizes !== this.props.columnSizes) {
       this.setState({