From c332f4145a5411fcbc4ed490c4aef7dc6b1fdfe8 Mon Sep 17 00:00:00 2001 From: Michel Weststrate Date: Tue, 3 Dec 2019 06:48:36 -0800 Subject: [PATCH] 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 | 7 ++----- src/chrome/ScreenCaptureButtons.tsx | 2 +- src/plugins/network/index.tsx | 2 +- src/ui/components/File.tsx | 5 +++-- src/ui/components/FileList.tsx | 2 +- src/ui/components/Orderable.tsx | 2 +- src/ui/components/Sidebar.tsx | 10 +++++++--- src/ui/components/elements-inspector/elements.tsx | 12 ++---------- src/ui/components/searchable/SearchableTable.tsx | 2 +- .../searchable/SearchableTable_immutable.tsx | 2 +- src/ui/components/table/ManagedTable.tsx | 2 +- src/ui/components/table/ManagedTable_immutable.tsx | 2 +- 12 files changed, 22 insertions(+), 28 deletions(-) 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 { retreivingBookmarks: false, }; - componentWillMount() { + componentDidMount() { document.addEventListener('keydown', this.keyDown); + this.updateBookmarks(); } componentWillUnmount() { @@ -101,10 +102,6 @@ class LocationsButton extends Component { }); }; - 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 { 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 { ); } - 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 { 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 { }); } - 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 { 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 { }; } - componentDidMount() { - this.setProps(this.props); - } - - componentWillReceiveProps(nextProps: ElementsProps) { - this.setProps(nextProps); - } - - setProps(props: ElementsProps) { + static getDerivedStateFromProps(props: ElementsProps) { const flatElements: FlatElements = []; const flatKeys: Array = []; @@ -509,7 +501,7 @@ export class Elements extends PureComponent { 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 { 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 { 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({