Use memoize one instead of getDerivedStateFromProps for soring state

ui/src/authorizations/components/TokenList.tsx

@@ -1,5 +1,7 @@
 // Libraries
 import React, {PureComponent} from 'react'
+import _ from 'lodash'
+import memoizeOne from 'memoize-one'
 
 // Components
 import {EmptyState} from '@influxdata/clockface'
@@ -29,21 +31,18 @@ interface Props {
 interface State {
   isTokenOverlayVisible: boolean
   authInView: Authorization
-  sortedAuths: Authorization[]
 }
 
 export default class TokenList extends PureComponent<Props, State> {
-  public static getDerivedStateFromProps(props: Props) {
-    return {
-      sortedAuths: getSortedResources(props.auths, props),
-    }
-  }
+  private memGetSortedResources = memoizeOne<typeof getSortedResources>(
+    getSortedResources
+  )
+
   constructor(props) {
     super(props)
     this.state = {
       isTokenOverlayVisible: false,
       authInView: null,
-      sortedAuths: this.props.auths,
     }
   }
 
@@ -82,7 +81,13 @@ export default class TokenList extends PureComponent<Props, State> {
   }
 
   private get rows(): JSX.Element[] {
-    const {sortedAuths} = this.state
+    const {auths, sortDirection, sortKey, sortType} = this.props
+    const sortedAuths = this.memGetSortedResources(
+      auths,
+      sortKey,
+      sortDirection,
+      sortType
+    )
 
     return sortedAuths.map(auth => (
       <TokenRow

ui/src/shared/selectors/sort.ts

@@ -1,8 +1,5 @@
-import {createSelector} from 'reselect'
 import {orderBy, get, toLower} from 'lodash'
 
-const resourceList = state => state
-
 export enum SortTypes {
   String = 'string',
 }
@@ -26,18 +23,18 @@ function orderByType(data, type) {
   }
 }
 
-export const getSortedResources = createSelector(
-  resourceList,
-  sortSelector,
-  (resourceList, sort) => {
-    if (sort.key && sort.direction) {
-      return orderBy<{id: string}>(
-        resourceList,
-        r => orderByType(get(r, sort.key), sort.type),
-        [sort.direction]
-      ).map(r => r)
-    }
-
-    return resourceList
+export function getSortedResources<T>(
+  resourceList: T[],
+  sortKey: string,
+  sortDirection: string,
+  sortType: string
+): T[] {
+  if (sortKey && sortDirection) {
+    return orderBy<T>(
+      resourceList,
+      r => orderByType(get(r, sortKey), sortType),
+      [sortDirection]
+    ).map(r => r)
   }
-)
+  return resourceList
+}