Stop using deprecated lifecycle methods

Summary:
Some lifecycle methods are deprecated now. Where they can be replaced easily I replaced them. Where they can't be updated easily I marked them as unsafe, as if a bigger refactoring is required for those components, we'd better convert them to function components instead.

Didn't update the plugins as they are ideally updated by their owners.

Didn't update styled components, there is a separate task for that.

Reviewed By: jknoxville

Differential Revision: D18780579

fbshipit-source-id: 132a3789875ab6a3caee582b0e5f7feb7dc4a4c1

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;

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);
     }

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));
   }
 

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() {

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);
     }

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,
     });

src/ui/components/Sidebar.tsx

@@ -121,10 +121,14 @@ export default class Sidebar extends Component<SidebarProps, SidebarState> {
     position: 'left',
   };
 
-  componentWillReceiveProps(nextProps: SidebarProps) {
+  static getDerivedStateFromProps(
-    if (!this.state.userChange) {
+    nextProps: SidebarProps,
-      this.setState({width: nextProps.width, height: nextProps.height});
+    state: SidebarState,
+  ) {
+    if (!state.userChange) {
+      return {width: nextProps.width, height: nextProps.height};
     }
+    return null;
   }
 
   onResize = (width: number, height: number) => {

src/ui/components/elements-inspector/elements.tsx

@@ -464,15 +464,7 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
     };
   }
 
-  componentDidMount() {
+  static getDerivedStateFromProps(props: ElementsProps) {
-    this.setProps(this.props);
-  }
-
-  componentWillReceiveProps(nextProps: ElementsProps) {
-    this.setProps(nextProps);
-  }
-
-  setProps(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) => {

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 ||

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 ||

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({

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({