Memoize context value (#3786)

2 files changed, 13 insertions, 8 deletions

diff --git a/src/components/Portal.tsx b/src/components/Portal.tsx
index d696f986b..03b397b2b 100644
--- a/src/components/Portal.tsx
+++ b/src/components/Portal.tsx
@@ -34,10 +34,17 @@ export function createPortalGroup() {
       setOutlet(<>{Object.values(map.current)}</>)
     }, [])
 
+    const contextValue = React.useMemo(
+      () => ({
+        outlet,
+        append,
+        remove,
+      }),
+      [outlet, append, remove],
+    )
+
     return (
-      <Context.Provider value={{outlet, append, remove}}>
-        {props.children}
-      </Context.Provider>
+      <Context.Provider value={contextValue}>{props.children}</Context.Provider>
     )
   }
 
diff --git a/src/state/preferences/label-defs.tsx b/src/state/preferences/label-defs.tsx
index d60f8ccb8..e24a1144a 100644
--- a/src/state/preferences/label-defs.tsx
+++ b/src/state/preferences/label-defs.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import {InterpretedLabelValueDefinition, AppBskyLabelerDefs} from '@atproto/api'
+import {AppBskyLabelerDefs, InterpretedLabelValueDefinition} from '@atproto/api'
+
 import {useLabelDefinitionsQuery} from '../queries/preferences'
 
 interface StateContext {
@@ -13,10 +14,7 @@ const stateContext = React.createContext<StateContext>({
 })
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const {labelDefs, labelers} = useLabelDefinitionsQuery()
-
-  const state = {labelDefs, labelers}
-
+  const state = useLabelDefinitionsQuery()
   return <stateContext.Provider value={state}>{children}</stateContext.Provider>
 }