Refactor UNSAFE_componentWillReceiveProps to use componentDidUpdate (j…

…aegertracing#612) Migrating these componentWillRecieveProps calls to componentDidUpdate in line with recommendations provided at https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops, stating "If you need to perform a side effect (for example, data fetching or an animation) in response to a change in props, use componentDidUpdate" Signed-off-by: Tim Klever <Tim.V.Klever@aexp.com> Signed-off-by: vvvprabhakar <vvvprabhakar@gmail.com>
vvvprabhakar · Jul 4, 2021 · 56c9ab2 · 56c9ab2
1 parent b4a3c45
commit 56c9ab2
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 27 deletions.
diff --git a/packages/jaeger-ui/src/components/App/Page.tsx b/packages/jaeger-ui/src/components/App/Page.tsx
@@ -42,10 +42,9 @@ export class PageImpl extends React.Component<TProps> {
     trackPageView(pathname, search);
   }
 
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps: TProps) {
-    const { pathname, search } = this.props;
-    const { pathname: nextPathname, search: nextSearch } = nextProps;
+  componentDidUpdate(prevProps: Readonly<TProps>) {
+    const { pathname, search } = prevProps;
+    const { pathname: nextPathname, search: nextSearch } = this.props;
     if (pathname !== nextPathname || search !== nextSearch) {
       trackPageView(nextPathname, nextSearch);
     }

diff --git a/packages/jaeger-ui/src/components/DeepDependencies/index.tsx b/packages/jaeger-ui/src/components/DeepDependencies/index.tsx
@@ -118,9 +118,8 @@ export class DeepDependencyGraphPageImpl extends React.PureComponent<TProps, TSt
     }
   }
 
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps: TProps) {
-    DeepDependencyGraphPageImpl.fetchModelIfStale(nextProps);
+  componentDidUpdate() {
+    DeepDependencyGraphPageImpl.fetchModelIfStale(this.props);
   }
 
   clearOperation = () => {

diff --git a/...i/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx b/...i/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx
@@ -137,10 +137,9 @@ export default class TimelineViewingLayer extends React.PureComponent<TimelineVi
     this._root = undefined;
   }
 
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps: TimelineViewingLayerProps) {
+  componentDidUpdate(prevProps: Readonly<TimelineViewingLayerProps>) {
     const { boundsInvalidator } = this.props;
-    if (boundsInvalidator !== nextProps.boundsInvalidator) {
+    if (prevProps.boundsInvalidator !== boundsInvalidator) {
       this._draggerReframe.resetBounds();
     }
   }

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/VirtualizedTraceView.tsx
@@ -179,24 +179,29 @@ export class VirtualizedTraceViewImpl extends React.Component<VirtualizedTraceVi
     return false;
   }
 
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillUpdate(nextProps: VirtualizedTraceViewProps) {
-    const { childrenHiddenIDs, detailStates, registerAccessors, trace, currentViewRangeTime } = this.props;
+  componentDidUpdate(prevProps: Readonly<VirtualizedTraceViewProps>) {
+    const { childrenHiddenIDs, detailStates, registerAccessors, trace, currentViewRangeTime } = prevProps;
     const {
+      shouldScrollToFirstUiFindMatch,
+      clearShouldScrollToFirstUiFindMatch,
+      scrollToFirstVisibleSpan,
       currentViewRangeTime: nextViewRangeTime,
       childrenHiddenIDs: nextHiddenIDs,
       detailStates: nextDetailStates,
       registerAccessors: nextRegisterAccessors,
       setTrace,
       trace: nextTrace,
       uiFind,
-    } = nextProps;
+    } = this.props;
+
     if (trace !== nextTrace) {
       setTrace(nextTrace, uiFind);
     }
+
     if (trace !== nextTrace || childrenHiddenIDs !== nextHiddenIDs || detailStates !== nextDetailStates) {
       this.rowStates = nextTrace ? generateRowStates(nextTrace.spans, nextHiddenIDs, nextDetailStates) : [];
     }
+
     if (currentViewRangeTime !== nextViewRangeTime) {
       this.clippingCssClasses = getCssClasses(nextViewRangeTime);
       const [zoomStart, zoomEnd] = nextViewRangeTime;
@@ -207,17 +212,11 @@ export class VirtualizedTraceViewImpl extends React.Component<VirtualizedTraceVi
         viewEnd: zoomEnd,
       });
     }
+
     if (this.listView && registerAccessors !== nextRegisterAccessors) {
       nextRegisterAccessors(this.getAccessors());
     }
-  }
 
-  componentDidUpdate() {
-    const {
-      shouldScrollToFirstUiFindMatch,
-      clearShouldScrollToFirstUiFindMatch,
-      scrollToFirstVisibleSpan,
-    } = this.props;
     if (shouldScrollToFirstUiFindMatch) {
       scrollToFirstVisibleSpan();
       clearShouldScrollToFirstUiFindMatch();

diff --git a/packages/jaeger-ui/src/components/TracePage/index.tsx b/packages/jaeger-ui/src/components/TracePage/index.tsx
@@ -182,14 +182,11 @@ export class TracePageImpl extends React.PureComponent<TProps, TState> {
     mergeShortcuts(shortcutCallbacks);
   }
 
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps: TProps) {
-    const { trace } = nextProps;
-    this._scrollManager.setTrace(trace && trace.data);
-  }
-
   componentDidUpdate({ id: prevID }: TProps) {
     const { id, trace } = this.props;
+
+    this._scrollManager.setTrace(trace && trace.data);
+
     this.setHeaderHeight(this._headerElm);
     if (!trace) {
       this.ensureTraceFetched();