Memoize context value (#3786)

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}}>
+      <Context.Provider value={contextValue}>{props.children}</Context.Provider>
-        {props.children}
-      </Context.Provider>
     )
   }
 

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 = useLabelDefinitionsQuery()
-
-  const state = {labelDefs, labelers}
-
   return <stateContext.Provider value={state}>{children}</stateContext.Provider>
 }