fix: ensure context provider values are memoized (#7199)

packages/sanity/src/core/components/previewCard/PreviewCard.tsx

@@ -1,5 +1,5 @@
 import {Card, type CardProps} from '@sanity/ui'
-import {type ForwardedRef, forwardRef, type HTMLProps, useContext} from 'react'
+import {type ForwardedRef, forwardRef, type HTMLProps, useContext, useMemo} from 'react'
 import {PreviewCardContext} from 'sanity/_singletons'
 import {css, styled} from 'styled-components'
 
@@ -41,9 +41,11 @@ export const PreviewCard = forwardRef(function PreviewCard(
 ) {
   const {children, selected, as, ...restProps} = props
 
+  const value = useMemo(() => ({selected}), [selected])
+
   return (
     <StyledCard data-ui="PreviewCard" {...restProps} forwardedAs={as} ref={ref} selected={selected}>
-      <PreviewCardContext.Provider value={{selected}}>{children}</PreviewCardContext.Provider>
+      <PreviewCardContext.Provider value={value}>{children}</PreviewCardContext.Provider>
     </StyledCard>
   )
 })

packages/sanity/src/core/field/diff/components/FieldChange.tsx

@@ -80,6 +80,8 @@ export function FieldChange(
    */
   const fieldPath = isArray ? change.path.slice(0, -1) : change.path
 
+  const value = useMemo(() => ({path: change.path}), [change.path])
+
   const content = useMemo(
     () =>
       hidden ? null : (
@@ -98,7 +100,7 @@ export function FieldChange(
                 <ValueError error={change.error} />
               ) : (
                 <DiffErrorBoundary t={t}>
-                  <DiffContext.Provider value={{path: change.path}}>
+                  <DiffContext.Provider value={value}>
                     <DiffComponent
                       diff={change.diff}
                       schemaType={change.schemaType as ObjectSchemaType}
@@ -152,23 +154,24 @@ export function FieldChange(
         </Stack>
       ),
     [
+      hidden,
       change,
-      closeRevertChangesConfirmDialog,
-      confirmRevertOpen,
-      DiffComponent,
-      fieldPath,
       FieldWrapper,
-      handleRevertButtonMouseEnter,
-      handleRevertButtonMouseLeave,
-      handleRevertChanges,
-      handleRevertChangesConfirm,
-      hidden,
+      fieldPath,
+      revertHovered,
+      t,
+      value,
+      DiffComponent,
       isComparingCurrent,
       isPermissionsLoading,
       permissions?.granted,
+      closeRevertChangesConfirmDialog,
+      handleRevertChanges,
+      confirmRevertOpen,
+      handleRevertChangesConfirm,
+      handleRevertButtonMouseEnter,
+      handleRevertButtonMouseLeave,
       readOnly,
-      revertHovered,
-      t,
     ],
   )
 

packages/sanity/src/core/field/types/portableText/diff/components/Annotation.tsx

@@ -167,8 +167,10 @@ function AnnnotationWithDiff({
   const annotation = (diff.action !== 'unchanged' && diff.annotation) || null
   const annotations = useMemo(() => (annotation ? [annotation] : []), [annotation])
 
+  const value = useMemo(() => ({path: myPath}), [myPath])
+
   const popoverContent = (
-    <DiffContext.Provider value={{path: myPath}}>
+    <DiffContext.Provider value={value}>
       <PopoverContainer padding={3}>
         <div>
           {emptyObject && (

packages/sanity/src/core/field/types/portableText/diff/components/InlineObject.tsx

@@ -128,8 +128,10 @@ function InlineObjectWithDiff({
     setOpen(false)
   }, [])
 
+  const value = useMemo(() => ({path: myPath}), [myPath])
+
   const popoverContent = (
-    <DiffContext.Provider value={{path: myPath}}>
+    <DiffContext.Provider value={value}>
       <PopoverContent
         diff={diff}
         emptyObject={emptyObject}

packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/List/VirtualizerScrollInstanceProvider.tsx

@@ -1,4 +1,4 @@
-import {type ReactNode} from 'react'
+import {type ReactNode, useMemo} from 'react'
 import {VirtualizerScrollInstanceContext} from 'sanity/_singletons'
 
 import {type VirtualizerScrollInstance} from './useVirtualizerScrollInstance'
@@ -17,10 +17,13 @@ interface VirtualizerScrollInstanceProviderProps extends VirtualizerScrollInstan
 export function VirtualizerScrollInstanceProvider(props: VirtualizerScrollInstanceProviderProps) {
   const {scrollElement, containerElement} = props
 
+  const value = useMemo(
+    () => ({scrollElement, containerElement: containerElement}),
+    [containerElement, scrollElement],
+  )
+
   return (
-    <VirtualizerScrollInstanceContext.Provider
-      value={{scrollElement, containerElement: containerElement}}
-    >
+    <VirtualizerScrollInstanceContext.Provider value={value}>
       {props.children}
     </VirtualizerScrollInstanceContext.Provider>
   )

packages/sanity/src/core/scheduledPublishing/tool/contexts/schedules.tsx

@@ -118,21 +118,27 @@ function SchedulesProvider({
     [value.schedules, filterByDate],
   )
 
-  return (
-    <SchedulesContext.Provider
-      value={{
-        activeSchedules,
-        schedules: value.schedules || EMPTY_SCHEDULE,
-        schedulesByDate,
-        scheduleState: value.scheduleState,
-        selectedDate: value.selectedDate,
-        setSortBy,
-        sortBy,
-      }}
-    >
-      {children}
-    </SchedulesContext.Provider>
+  const context = useMemo(
+    () => ({
+      activeSchedules,
+      schedules: value.schedules || EMPTY_SCHEDULE,
+      schedulesByDate,
+      scheduleState: value.scheduleState,
+      selectedDate: value.selectedDate,
+      setSortBy,
+      sortBy,
+    }),
+    [
+      activeSchedules,
+      schedulesByDate,
+      sortBy,
+      value.scheduleState,
+      value.schedules,
+      value.selectedDate,
+    ],
   )
+
+  return <SchedulesContext.Provider value={context}>{children}</SchedulesContext.Provider>
 }
 
 function useSchedules() {

packages/sanity/src/core/studio/components/navbar/free-trial/FreeTrialProvider.tsx

@@ -1,5 +1,5 @@
 import {useTelemetry} from '@sanity/telemetry/react'
-import {type ReactNode, useCallback, useEffect, useState} from 'react'
+import {type ReactNode, useCallback, useEffect, useMemo, useState} from 'react'
 import {FreeTrialContext} from 'sanity/_singletons'
 import {useRouter} from 'sanity/router'
 
@@ -102,9 +102,10 @@ export const FreeTrialProvider = ({children}: FreeTrialProviderProps) => {
     [client, showOnLoad, data?.showOnLoad?.id],
   )
 
-  return (
-    <FreeTrialContext.Provider value={{data, showDialog, toggleShowContent, showOnLoad}}>
-      {children}
-    </FreeTrialContext.Provider>
+  const value = useMemo(
+    () => ({data, showDialog, toggleShowContent, showOnLoad}),
+    [data, showDialog, showOnLoad, toggleShowContent],
   )
+
+  return <FreeTrialContext.Provider value={value}>{children}</FreeTrialContext.Provider>
 }

packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/datePicker/calendar/Calendar.tsx

@@ -5,6 +5,7 @@ import {
   type KeyboardEvent,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react'
@@ -185,17 +186,20 @@ export function Calendar(props: CalendarProps) {
     previousEndDate.current = endDate || null
   }, [date, endDate, onSelect])
 
+  const value = useMemo(
+    () => ({
+      date,
+      endDate,
+      focusedDate,
+      selectRange,
+      selectTime,
+      firstWeekDay,
+    }),
+    [date, endDate, firstWeekDay, focusedDate, selectRange, selectTime],
+  )
+
   return (
-    <CalendarContext.Provider
-      value={{
-        date,
-        endDate,
-        focusedDate,
-        selectRange,
-        selectTime,
-        firstWeekDay,
-      }}
-    >
+    <CalendarContext.Provider value={value}>
       <Box data-ui="Calendar" ref={setCalendarElement}>
         {/* Select month and year */}
         <Flex>

packages/sanity/src/core/tasks/__workshop__/TasksCreateStory.tsx

@@ -1,29 +1,33 @@
+import {useMemo} from 'react'
 import {TasksNavigationContext} from 'sanity/_singletons'
 
 import {AddonDatasetProvider} from '../../studio'
 import {TasksFormBuilder} from '../components'
 import {TasksProvider} from '../context'
 
 export default function TasksCreateStory() {
+  const value = useMemo(
+    () =>
+      ({
+        state: {
+          viewMode: 'create',
+          activeTabId: 'assigned',
+          selectedTask: '123',
+          duplicateTaskValues: null,
+          isOpen: true,
+        },
+        setViewMode: () => null,
+        setActiveTab: () => null,
+        handleCloseTasks: () => null,
+        handleOpenTasks: () => null,
+        handleCopyLinkToTask: () => null,
+      }) as const,
+    [],
+  )
   return (
     <AddonDatasetProvider>
       <TasksProvider>
-        <TasksNavigationContext.Provider
-          value={{
-            state: {
-              viewMode: 'create',
-              activeTabId: 'assigned',
-              selectedTask: '123',
-              duplicateTaskValues: null,
-              isOpen: true,
-            },
-            setViewMode: () => null,
-            setActiveTab: () => null,
-            handleCloseTasks: () => null,
-            handleOpenTasks: () => null,
-            handleCopyLinkToTask: () => null,
-          }}
-        >
+        <TasksNavigationContext.Provider value={value}>
           <TasksFormBuilder />
         </TasksNavigationContext.Provider>
       </TasksProvider>

packages/sanity/src/core/tasks/context/navigation/TasksNavigationProvider.tsx

@@ -1,7 +1,7 @@
 import {useTelemetry} from '@sanity/telemetry/react'
 import {useToast} from '@sanity/ui'
 import {uuid} from '@sanity/uuid'
-import {type ReactNode, useCallback, useEffect, useReducer} from 'react'
+import {type ReactNode, useCallback, useEffect, useMemo, useReducer} from 'react'
 import {TasksNavigationContext} from 'sanity/_singletons'
 import {useRouter} from 'sanity/router'
 
@@ -161,18 +161,17 @@ export const TasksNavigationProvider = ({children}: {children: ReactNode}) => {
     }
   }, [searchParamsAsString, telemetry])
 
-  return (
-    <TasksNavigationContext.Provider
-      value={{
-        state,
-        setViewMode,
-        setActiveTab,
-        handleCloseTasks,
-        handleOpenTasks,
-        handleCopyLinkToTask,
-      }}
-    >
-      {children}
-    </TasksNavigationContext.Provider>
+  const value = useMemo(
+    () => ({
+      state,
+      setViewMode,
+      setActiveTab,
+      handleCloseTasks,
+      handleOpenTasks,
+      handleCopyLinkToTask,
+    }),
+    [handleCloseTasks, handleCopyLinkToTask, handleOpenTasks, setActiveTab, setViewMode, state],
   )
+
+  return <TasksNavigationContext.Provider value={value}>{children}</TasksNavigationContext.Provider>
 }