From c5858f9ed292e721df56749576e903176040aca2 Mon Sep 17 00:00:00 2001
From: Jamie Wong <jamie.lf.wong@gmail.com>
Date: Sat, 23 May 2020 16:36:15 -0700
Subject: [PATCH] Make use of useCallback to prevent unnecessary
 unsubscribe/re-subscribe calls

---
 src/views/application-container.tsx           | 39 ++++++++++---------
 src/views/callee-flamegraph-view.tsx          |  5 ++-
 src/views/inverted-caller-flamegraph-view.tsx |  5 ++-
 src/views/profile-table-view.tsx              |  2 +-
 4 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/views/application-container.tsx b/src/views/application-container.tsx
index 61abb2f7a..45dbee652 100644
--- a/src/views/application-container.tsx
+++ b/src/views/application-container.tsx
@@ -4,30 +4,33 @@ import {getProfileToView, getCanvasContext} from '../store/getters'
 import {actions} from '../store/actions'
 import {useActionCreator} from '../lib/preact-redux'
 import {memo} from 'preact/compat'
+import {useCallback} from 'preact/hooks'
 import {useAppSelector} from '../store'
 
 export const ApplicationContainer = memo(() => {
-  const appState = useAppSelector(state => state)
-  const canvasContext = useAppSelector(state =>
-    state.glCanvas ? getCanvasContext(state.glCanvas) : null,
+  const appState = useAppSelector(useCallback(state => state, []))
+  const canvasContext = useAppSelector(
+    useCallback(state => (state.glCanvas ? getCanvasContext(state.glCanvas) : null), []),
   )
 
-  const activeProfileState: ActiveProfileState | null = useAppSelector(state => {
-    const {profileGroup} = state
-    if (!profileGroup) return null
-    if (profileGroup.indexToView >= profileGroup.profiles.length) return null
+  const activeProfileState: ActiveProfileState | null = useAppSelector(
+    useCallback(state => {
+      const {profileGroup} = state
+      if (!profileGroup) return null
+      if (profileGroup.indexToView >= profileGroup.profiles.length) return null
 
-    const index = profileGroup.indexToView
-    const profileState = profileGroup.profiles[index]
-    return {
-      ...profileGroup.profiles[profileGroup.indexToView],
-      profile: getProfileToView({
-        profile: profileState.profile,
-        flattenRecursion: state.flattenRecursion,
-      }),
-      index: profileGroup.indexToView,
-    }
-  })
+      const index = profileGroup.indexToView
+      const profileState = profileGroup.profiles[index]
+      return {
+        ...profileGroup.profiles[profileGroup.indexToView],
+        profile: getProfileToView({
+          profile: profileState.profile,
+          flattenRecursion: state.flattenRecursion,
+        }),
+        index: profileGroup.indexToView,
+      }
+    }, []),
+  )
 
   return (
     <Application
diff --git a/src/views/callee-flamegraph-view.tsx b/src/views/callee-flamegraph-view.tsx
index 1699f885d..c640f2b56 100644
--- a/src/views/callee-flamegraph-view.tsx
+++ b/src/views/callee-flamegraph-view.tsx
@@ -17,6 +17,7 @@ import {FlamechartWrapper} from './flamechart-wrapper'
 import {useAppSelector} from '../store'
 import {h} from 'preact'
 import {memo} from 'preact/compat'
+import {useCallback} from 'preact/hooks'
 
 const getCalleeProfile = memoizeByShallowEquality<
   {
@@ -50,8 +51,8 @@ const getCalleeFlamegraphRenderer = createMemoizedFlamechartRenderer()
 export const CalleeFlamegraphView = memo((ownProps: FlamechartViewContainerProps) => {
   const {activeProfileState} = ownProps
   const {index, profile, sandwichViewState} = activeProfileState
-  const flattenRecursion = useAppSelector(state => state.flattenRecursion)
-  const glCanvas = useAppSelector(state => state.glCanvas)
+  const flattenRecursion = useAppSelector(useCallback(state => state.flattenRecursion, []))
+  const glCanvas = useAppSelector(useCallback(state => state.glCanvas, []))
 
   if (!profile) throw new Error('profile missing')
   if (!glCanvas) throw new Error('glCanvas missing')
diff --git a/src/views/inverted-caller-flamegraph-view.tsx b/src/views/inverted-caller-flamegraph-view.tsx
index 10cd2098d..a415bc371 100644
--- a/src/views/inverted-caller-flamegraph-view.tsx
+++ b/src/views/inverted-caller-flamegraph-view.tsx
@@ -18,6 +18,7 @@ import {useAppSelector} from '../store'
 import {FlamechartWrapper} from './flamechart-wrapper'
 import {h} from 'preact'
 import {memo} from 'preact/compat'
+import {useCallback} from 'preact/hooks'
 
 const getInvertedCallerProfile = memoizeByShallowEquality(
   ({
@@ -56,8 +57,8 @@ const getInvertedCallerFlamegraphRenderer = createMemoizedFlamechartRenderer({in
 export const InvertedCallerFlamegraphView = memo((ownProps: FlamechartViewContainerProps) => {
   const {activeProfileState} = ownProps
   let {profile, sandwichViewState, index} = activeProfileState
-  const flattenRecursion = useAppSelector(state => state.flattenRecursion)
-  const glCanvas = useAppSelector(state => state.glCanvas)
+  const flattenRecursion = useAppSelector(useCallback(state => state.flattenRecursion, []))
+  const glCanvas = useAppSelector(useCallback(state => state.glCanvas, []))
 
   if (!profile) throw new Error('profile missing')
   if (!glCanvas) throw new Error('glCanvas missing')
diff --git a/src/views/profile-table-view.tsx b/src/views/profile-table-view.tsx
index 7e0f3717a..95b3a86c4 100644
--- a/src/views/profile-table-view.tsx
+++ b/src/views/profile-table-view.tsx
@@ -357,7 +357,7 @@ export const ProfileTableViewContainer = memo((ownProps: ProfileTableViewContain
   const {activeProfileState} = ownProps
   const {profile, sandwichViewState, index} = activeProfileState
   if (!profile) throw new Error('profile missing')
-  const tableSortMethod = useAppSelector(state => state.tableSortMethod)
+  const tableSortMethod = useAppSelector(useCallback(state => state.tableSortMethod, []))
   const {callerCallee} = sandwichViewState
   const selectedFrame = callerCallee ? callerCallee.selectedFrame : null
   const frameToColorBucket = getFrameToColorBucket(profile)