Perf: switch to stable react keys (#1113)

src/state/models/feeds/notifications.ts

@@ -23,8 +23,6 @@ const PAGE_SIZE = 30
 const MS_1HR = 1e3 * 60 * 60
 const MS_2DAY = MS_1HR * 48
 
-let _idCounter = 0
-
 export const MAX_VISIBLE_NOTIFS = 30
 
 export interface GroupedNotification extends ListNotifications.Notification {
@@ -573,7 +571,7 @@ export class NotificationsFeedModel {
     for (const item of items) {
       const itemModel = new NotificationsFeedItemModel(
         this.rootStore,
-        `item-${_idCounter++}`,
+        `notification-${item.uri}`,
         item,
       )
       const uri = itemModel.additionalDataUri

src/state/models/feeds/post.ts

@@ -28,10 +28,10 @@ export class PostsFeedItemModel {
 
   constructor(
     public rootStore: RootStoreModel,
-    reactKey: string,
+    _reactKey: string,
     v: FeedViewPost,
   ) {
-    this._reactKey = reactKey
+    this._reactKey = _reactKey
     this.post = v.post
     if (FeedPost.isRecord(this.post.record)) {
       const valid = FeedPost.validateRecord(this.post.record)

src/state/models/feeds/posts-slice.ts

@@ -3,8 +3,6 @@ import {RootStoreModel} from '../root-store'
 import {FeedViewPostsSlice} from 'lib/api/feed-manip'
 import {PostsFeedItemModel} from './post'
 
-let _idCounter = 0
-
 export class PostsFeedSliceModel {
   // ui state
   _reactKey: string = ''
@@ -12,15 +10,15 @@ export class PostsFeedSliceModel {
   // data
   items: PostsFeedItemModel[] = []
 
-  constructor(
+  constructor(public rootStore: RootStoreModel, slice: FeedViewPostsSlice) {
-    public rootStore: RootStoreModel,
+    this._reactKey = `slice-${slice.uri}`
-    reactKey: string,
+    for (let i = 0; i < slice.items.length; i++) {
-    slice: FeedViewPostsSlice,
-  ) {
-    this._reactKey = reactKey
-    for (const item of slice.items) {
       this.items.push(
-        new PostsFeedItemModel(rootStore, `slice-${_idCounter++}`, item),
+        new PostsFeedItemModel(
+          rootStore,
+          `${this._reactKey} - ${i}`,
+          slice.items[i],
+        ),
       )
     }
     makeAutoObservable(this, {rootStore: false})

src/state/models/feeds/posts.ts

@@ -13,7 +13,6 @@ import {PostsFeedSliceModel} from './posts-slice'
 import {track} from 'lib/analytics/analytics'
 
 const PAGE_SIZE = 30
-let _idCounter = 0
 
 type QueryParams =
   | GetTimeline.QueryParams
@@ -368,11 +367,7 @@ export class PostsFeedModel {
 
     const toAppend: PostsFeedSliceModel[] = []
     for (const slice of slices) {
-      const sliceModel = new PostsFeedSliceModel(
+      const sliceModel = new PostsFeedSliceModel(this.rootStore, slice)
-        this.rootStore,
-        `item-${_idCounter++}`,
-        slice,
-      )
       toAppend.push(sliceModel)
     }
     runInAction(() => {