perf: memoize context values in use*ContextValues hooks

change/@fluentui-react-accordion-a035aacb-feec-4686-9d08-dfe5b99b113f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "perf: memoize context values in use*ContextValues hooks",
+  "packageName": "@fluentui/react-accordion",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-avatar-a7ba6b80-bd13-41cd-9f87-19a821ed169f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "perf: memoize context values in use*ContextValues hooks",
+  "packageName": "@fluentui/react-avatar",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-carousel-644cda54-062a-43b9-981f-c1fabf97482c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "perf: memoize context values in use*ContextValues hooks",
+  "packageName": "@fluentui/react-carousel",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-color-picker-d144aa96-5c6a-43be-9c90-21d1bd2486f9.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "perf: memoize context values in use*ContextValues hooks",
+  "packageName": "@fluentui/react-color-picker",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-dialog-6b927bc7-5fbf-453a-b6b3-618f33f0cef4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "perf: memoize context values in use*ContextValues hooks",
+  "packageName": "@fluentui/react-dialog",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-list-f2d5fd86-ac00-4a26-827d-1e8735fd408e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "perf: memoize context values in use*ContextValues hooks",
+  "packageName": "@fluentui/react-list",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-menu-b15954ad-9104-4f6b-836d-a0b19c2aa079.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "perf: memoize context values in use*ContextValues hooks",
+  "packageName": "@fluentui/react-menu",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-popover-6dcad78f-0802-4813-9338-396aa1c76c54.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "perf: memoize context values in use*ContextValues hooks",
+  "packageName": "@fluentui/react-popover",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-swatch-picker-62d6355e-f4aa-46f8-a3fc-a0b47b7b19ff.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "perf: memoize context values in use*ContextValues hooks",
+  "packageName": "@fluentui/react-swatch-picker",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-table-971a0a61-873b-490c-8aa6-55525810b3ef.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "perf: memoize context values in use*ContextValues hooks",
+  "packageName": "@fluentui/react-table",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tabs-2788d005-7db8-4940-b1b2-8555f2856eb3.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "perf: memoize context values in use*ContextValues hooks",
+  "packageName": "@fluentui/react-tabs",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-teaching-popover-0fb348ae-dd55-4ad2-9c67-e07659802fae.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "perf: memoize context values in use*ContextValues hooks",
+  "packageName": "@fluentui/react-teaching-popover",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-toolbar-4958f82a-f2a1-4c90-a617-3072254072bc.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "perf: memoize context values in use*ContextValues hooks",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tree-a8645cae-35d2-4d3d-931e-1e0b361e63ad.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "perf: memoize context values in use*ContextValues hooks",
+  "packageName": "@fluentui/react-tree",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-accordion/library/src/components/Accordion/useAccordionContextValues.ts

@@ -1,17 +1,22 @@
+'use client';
+
+import * as React from 'react';
 import type { AccordionContextValue } from '../../contexts/accordion';
 import type { AccordionContextValues, AccordionState } from './Accordion.types';
 
 export function useAccordionContextValues_unstable(state: AccordionState): AccordionContextValues {
   const { navigation, openItems, requestToggle, multiple, collapsible } = state;
 
-  // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
-  const accordion: AccordionContextValue = {
-    navigation,
-    openItems,
-    requestToggle,
-    collapsible,
-    multiple,
-  };
+  const accordion = React.useMemo<AccordionContextValue>(
+    () => ({
+      navigation,
+      openItems,
+      requestToggle,
+      collapsible,
+      multiple,
+    }),
+    [navigation, openItems, requestToggle, collapsible, multiple],
+  );
 
   return { accordion };
 }

packages/react-components/react-avatar/library/src/components/AvatarGroup/useAvatarGroupContextValues.ts

@@ -1,12 +1,18 @@
+'use client';
+
+import * as React from 'react';
 import type { AvatarGroupContextValue, AvatarGroupContextValues, AvatarGroupState } from '../AvatarGroup';
 
 export const useAvatarGroupContextValues = (state: AvatarGroupState): AvatarGroupContextValues => {
   const { layout, size } = state;
 
-  const avatarGroup: AvatarGroupContextValue = {
-    layout,
-    size,
-  };
+  const avatarGroup = React.useMemo<AvatarGroupContextValue>(
+    () => ({
+      layout,
+      size,
+    }),
+    [layout, size],
+  );
 
   return { avatarGroup };
 };

packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/useAvatarGroupPopoverContextValues.ts

@@ -1,13 +1,19 @@
+'use client';
+
+import * as React from 'react';
 import type { AvatarGroupContextValue, AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';
 import type { AvatarGroupPopoverState } from './AvatarGroupPopover.types';
 
 export const useAvatarGroupPopoverContextValues_unstable = (
   state: AvatarGroupPopoverState,
 ): AvatarGroupContextValues => {
-  const avatarGroup: AvatarGroupContextValue = {
-    isOverflow: true,
-    size: 24,
-  };
+  const avatarGroup = React.useMemo<AvatarGroupContextValue>(
+    () => ({
+      isOverflow: true,
+      size: 24,
+    }),
+    [],
+  );
 
   return { avatarGroup };
 };

packages/react-components/react-carousel/library/src/components/CarouselNav/CarouselNav.tsx

@@ -4,7 +4,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React from 'react';
 
 import type { CarouselNavProps } from './CarouselNav.types';
-import { useCarouselNavContextValues_unstable } from './CarouselNavContext';
+import { useCarouselNavContextValues_unstable } from './useCarouselNavContextValues';
 import { renderCarouselNav_unstable } from './renderCarouselNav';
 import { useCarouselNav_unstable } from './useCarouselNav';
 import { useCarouselNavStyles_unstable } from './useCarouselNavStyles.styles';

packages/react-components/react-carousel/library/src/components/CarouselNav/CarouselNavContext.ts

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import type { CarouselNavContextValue, CarouselNavState } from './CarouselNav.types';
+import type { CarouselNavContextValue } from './CarouselNav.types';
 
 const carouselNavContext = React.createContext<CarouselNavContextValue | undefined>(undefined);
 
@@ -20,10 +20,3 @@ export const CarouselNavContextProvider = carouselNavContext.Provider;
 export type CarouselNavContextValues = {
   carouselNav: CarouselNavContextValue;
 };
-
-export function useCarouselNavContextValues_unstable(state: CarouselNavState): CarouselNavContextValues {
-  const { appearance } = state;
-  const carouselNav = React.useMemo(() => ({ appearance }), [appearance]);
-
-  return { carouselNav };
-}

packages/react-components/react-carousel/library/src/components/CarouselNav/useCarouselNavContextValues.ts

@@ -0,0 +1,12 @@
+'use client';
+
+import * as React from 'react';
+import type { CarouselNavContextValues } from './CarouselNavContext';
+import type { CarouselNavState } from './CarouselNav.types';
+
+export function useCarouselNavContextValues_unstable(state: CarouselNavState): CarouselNavContextValues {
+  const { appearance } = state;
+  const carouselNav = React.useMemo(() => ({ appearance }), [appearance]);
+
+  return { carouselNav };
+}

packages/react-components/react-carousel/library/src/components/CarouselSlider/CarouselSlider.tsx

@@ -7,7 +7,7 @@ import { useCarouselSlider_unstable } from './useCarouselSlider';
 import { renderCarouselSlider_unstable } from './renderCarouselSlider';
 import { useCarouselSliderStyles_unstable } from './useCarouselSliderStyles.styles';
 import type { CarouselSliderProps } from './CarouselSlider.types';
-import { useCarouselSliderContextValues_unstable } from './CarouselSliderContext';
+import { useCarouselSliderContextValues_unstable } from './useCarouselSliderContextValues';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**

packages/react-components/react-carousel/library/src/components/CarouselSlider/CarouselSliderContext.ts

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import type { CarouselSliderContextValue, CarouselSliderState } from './CarouselSlider.types';
+import type { CarouselSliderContextValue } from './CarouselSlider.types';
 
 const carouselSliderContext = React.createContext<CarouselSliderContextValue | undefined>(undefined);
 
@@ -20,15 +20,3 @@ export const CarouselSliderContextProvider = carouselSliderContext.Provider;
 export type CarouselSliderContextValues = {
   carouselSlider: CarouselSliderContextValue;
 };
-
-export function useCarouselSliderContextValues_unstable(state: CarouselSliderState): CarouselSliderContextValues {
-  const { cardFocus } = state;
-  const carouselSlider = React.useMemo(
-    () => ({
-      cardFocus,
-    }),
-    [cardFocus],
-  );
-
-  return { carouselSlider };
-}

packages/react-components/react-carousel/library/src/components/CarouselSlider/useCarouselSliderContextValues.ts

@@ -0,0 +1,12 @@
+'use client';
+
+import * as React from 'react';
+import type { CarouselSliderContextValues } from './CarouselSliderContext';
+import type { CarouselSliderState } from './CarouselSlider.types';
+
+export function useCarouselSliderContextValues_unstable(state: CarouselSliderState): CarouselSliderContextValues {
+  const { cardFocus } = state;
+  const carouselSlider = React.useMemo(() => ({ cardFocus }), [cardFocus]);
+
+  return { carouselSlider };
+}

packages/react-components/react-carousel/library/src/components/CarouselViewport/CarouselViewport.tsx

@@ -6,7 +6,7 @@ import { useCarouselViewport_unstable } from './useCarouselViewport';
 import { renderCarouselViewport_unstable } from './renderCarouselViewport';
 import { useCarouselViewportStyles_unstable } from './useCarouselViewportStyles.styles';
 import type { CarouselViewportProps } from './CarouselViewport.types';
-import { useCarouselSliderContextValues_unstable } from '../CarouselSlider/CarouselSliderContext';
+import { useCarouselSliderContextValues_unstable } from '../CarouselSlider/useCarouselSliderContextValues';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**

packages/react-components/react-color-picker/library/src/components/ColorPicker/ColorPicker.tsx

@@ -6,7 +6,7 @@ import { useColorPicker_unstable } from './useColorPicker';
 import { renderColorPicker_unstable } from './renderColorPicker';
 import { useColorPickerStyles_unstable } from './useColorPickerStyles.styles';
 import type { ColorPickerProps } from './ColorPicker.types';
-import { useColorPickerContextValues } from '../../contexts/colorPicker';
+import { useColorPickerContextValues } from './useColorPickerContextValues';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**

packages/react-components/react-color-picker/library/src/components/ColorPicker/useColorPickerContextValues.ts

@@ -0,0 +1,20 @@
+'use client';
+
+import * as React from 'react';
+import type { ColorPickerContextValue, ColorPickerContextValues } from '../../contexts/colorPicker';
+import type { ColorPickerState } from './ColorPicker.types';
+
+export const useColorPickerContextValues = (state: ColorPickerState): ColorPickerContextValues => {
+  const { color, shape, requestChange } = state;
+
+  const colorPicker = React.useMemo<ColorPickerContextValue>(
+    () => ({
+      requestChange,
+      color,
+      shape,
+    }),
+    [requestChange, color, shape],
+  );
+
+  return { colorPicker };
+};

packages/react-components/react-color-picker/library/src/contexts/colorPicker.ts

@@ -3,7 +3,7 @@
 import type * as React from 'react';
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 import type { ContextSelector, Context } from '@fluentui/react-context-selector';
-import type { ColorPickerState, ColorPickerProps } from '../components/ColorPicker/ColorPicker.types';
+import type { ColorPickerProps } from '../components/ColorPicker/ColorPicker.types';
 import type { HsvColor } from '../types/color';
 
 /**
@@ -19,19 +19,6 @@ export type ColorPickerContextValue = Pick<ColorPickerProps, 'shape' | 'color'>
   requestChange: (event: React.ChangeEvent<HTMLInputElement>, data: { color: HsvColor }) => void;
 };
 
-export const useColorPickerContextValues = (state: ColorPickerState): ColorPickerContextValues => {
-  const { color, shape, requestChange } = state;
-
-  // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
-  const colorPicker: ColorPickerContextValue = {
-    requestChange,
-    color,
-    shape,
-  };
-
-  return { colorPicker };
-};
-
 export const colorPickerContextDefaultValue: ColorPickerContextValue = {
   requestChange: () => {
     /*noop*/