Make use of useCallback to prevent unnecessary unsubscribe/re-subscri…

…be calls
jlfwong · May 23, 2020 · c5858f9 · c5858f9
1 parent 8f0715b
commit c5858f9
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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)