mui · Janpot · Oct 28, 2022 · Oct 22, 2022 · Oct 22, 2022 · Oct 24, 2022
diff --git a/docs/data/base/components/menu/UseMenu.js b/docs/data/base/components/menu/UseMenu.js
@@ -150,13 +150,16 @@ const Menu = React.forwardRef(function Menu(props, ref) {
     open,
   });
 
-  const contextValue = {
-    registerItem,
-    unregisterItem,
-    getItemState,
-    getItemProps,
-    open: true,
-  };
+  const contextValue = React.useMemo(
+    () => ({
+      registerItem,
+      unregisterItem,
+      getItemState,
+      getItemProps,
+      open: true,
+    }),
+    [getItemProps, getItemState, registerItem, unregisterItem],
+  );
 
   return (
     <ul className="menu-root" {...other} {...getListboxProps()}>

diff --git a/docs/data/base/components/menu/UseMenu.tsx b/docs/data/base/components/menu/UseMenu.tsx
@@ -159,13 +159,16 @@ const Menu = React.forwardRef(function Menu(
     open,
   });
 
-  const contextValue: MenuUnstyledContextType = {
-    registerItem,
-    unregisterItem,
-    getItemState,
-    getItemProps,
-    open: true,
-  };
+  const contextValue: MenuUnstyledContextType = React.useMemo(
+    () => ({
+      registerItem,
+      unregisterItem,
+      getItemState,
+      getItemProps,
+      open: true,
+    }),
+    [getItemProps, getItemState, registerItem, unregisterItem],
+  );
 
   return (
     <ul className="menu-root" {...other} {...getListboxProps()}>

diff --git a/docs/pages/_app.js b/docs/pages/_app.js
@@ -207,6 +207,11 @@ function AppWrapper(props) {
     ];
   }
 
+  const pageContextValue = React.useMemo(
+    () => ({ activePage, pages: productPages }),
+    [activePage, productPages],
+  );
+
   return (
     <React.Fragment>
       <NextHead>
@@ -219,7 +224,7 @@ function AppWrapper(props) {
         <LanguageNegotiation />
         <CodeCopyProvider>
           <CodeVariantProvider>
-            <PageContext.Provider value={{ activePage, pages: productPages }}>
+            <PageContext.Provider value={pageContextValue}>
               <ThemeProvider>
                 <DocsStyledEngineProvider cacheLtr={emotionCache}>
                   {children}

diff --git a/examples/remix-with-typescript/app/entry.client.tsx b/examples/remix-with-typescript/app/entry.client.tsx
@@ -15,12 +15,17 @@ interface ClientCacheProviderProps {
 function ClientCacheProvider({ children }: ClientCacheProviderProps) {
   const [cache, setCache] = useState(createEmotionCache());
 
-  function reset() {
-    setCache(createEmotionCache());
-  }
+  const clientStyleContextValue = React.useMemo(
+    () => ({
+      reset() {
+        setCache(createEmotionCache());
+      },
+    }),
+    [],
+  );
 
   return (
-    <ClientStyleContext.Provider value={{ reset }}>
+    <ClientStyleContext.Provider value={clientStyleContextValue}>
       <CacheProvider value={cache}>{children}</CacheProvider>
     </ClientStyleContext.Provider>
   );

diff --git a/packages/mui-base/src/FormControlUnstyled/FormControlUnstyled.tsx b/packages/mui-base/src/FormControlUnstyled/FormControlUnstyled.tsx
@@ -108,26 +108,26 @@ const FormControlUnstyled = React.forwardRef(function FormControlUnstyled<
     required,
   };
 
-  const handleChange = (event: React.ChangeEvent<NativeFormControlElement>) => {
-    setValue(event.target.value);
-    onChange?.(event);
-  };
-
-  const childContext: FormControlUnstyledState = {
-    disabled,
-    error,
-    filled,
-    focused,
-    onBlur: () => {
-      setFocused(false);
-    },
-    onChange: handleChange,
-    onFocus: () => {
-      setFocused(true);
-    },
-    required,
-    value: value ?? '',
-  };
+  const childContext: FormControlUnstyledState = React.useMemo(() => {
+    return {
+      disabled,
+      error,
+      filled,
+      focused,
+      onBlur: () => {
+        setFocused(false);
+      },
+      onChange: (event: React.ChangeEvent<NativeFormControlElement>) => {
+        setValue(event.target.value);
+        onChange?.(event);
+      },
+      onFocus: () => {
+        setFocused(true);
+      },
+      required,
+      value: value ?? '',
+    };
+  }, [disabled, error, filled, focused, onChange, required, setValue, value]);
 
   const classes = useUtilityClasses(ownerState);
 

diff --git a/packages/mui-base/src/MenuUnstyled/MenuUnstyled.tsx b/packages/mui-base/src/MenuUnstyled/MenuUnstyled.tsx
@@ -106,13 +106,16 @@ const MenuUnstyled = React.forwardRef(function MenuUnstyled<
     className: classes.listbox,
   });
 
-  const contextValue: MenuUnstyledContextType = {
-    registerItem,
-    unregisterItem,
-    getItemState,
-    getItemProps,
-    open,
-  };
+  const contextValue: MenuUnstyledContextType = React.useMemo(
+    () => ({
+      registerItem,
+      unregisterItem,
+      getItemState,
+      getItemProps,
+      open,
+    }),
+    [getItemProps, getItemState, open, registerItem, unregisterItem],
+  );
 
   return (
     <Root {...rootProps}>

diff --git a/packages/mui-base/src/MultiSelectUnstyled/MultiSelectUnstyled.tsx b/packages/mui-base/src/MultiSelectUnstyled/MultiSelectUnstyled.tsx
@@ -219,11 +219,14 @@ const MultiSelectUnstyled = React.forwardRef(function MultiSelectUnstyled<TValue
     className: classes.popper,
   });
 
-  const context: SelectUnstyledContextType = {
-    getOptionProps,
-    getOptionState,
-    listboxRef,
-  };
+  const context: SelectUnstyledContextType = React.useMemo(
+    () => ({
+      getOptionProps,
+      getOptionState,
+      listboxRef,
+    }),
+    [getOptionProps, getOptionState],
+  );
 
   return (
     <React.Fragment>

diff --git a/packages/mui-base/src/SelectUnstyled/SelectUnstyled.tsx b/packages/mui-base/src/SelectUnstyled/SelectUnstyled.tsx
@@ -208,11 +208,14 @@ const SelectUnstyled = React.forwardRef(function SelectUnstyled<TValue extends {
     className: classes.popper,
   });
 
-  const context: SelectUnstyledContextType = {
-    getOptionProps,
-    getOptionState,
-    listboxRef,
-  };
+  const context: SelectUnstyledContextType = React.useMemo(
+    () => ({
+      getOptionProps,
+      getOptionState,
+      listboxRef,
+    }),
+    [getOptionProps, getOptionState],
+  );
 
   return (
     <React.Fragment>

diff --git a/packages/mui-joy/src/AvatarGroup/AvatarGroup.tsx b/packages/mui-joy/src/AvatarGroup/AvatarGroup.tsx
@@ -49,13 +49,16 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
 
   const { className, color, component = 'div', size = 'md', variant, children, ...other } = props;
 
-  const ownerState = {
-    ...props,
-    color,
-    component,
-    size,
-    variant,
-  };
+  const ownerState = React.useMemo(
+    () => ({
+      ...props,
+      color,
+      component,
+      size,
+      variant,
+    }),
+    [color, component, props, size, variant],
+  );
 
   const classes = useUtilityClasses();
 

diff --git a/packages/mui-joy/src/Chip/Chip.tsx b/packages/mui-joy/src/Chip/Chip.tsx
@@ -275,8 +275,13 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
     className: classes.endDecorator,
   });
 
+  const chipContextValue = React.useMemo(
+    () => ({ disabled, variant, color }),
+    [color, disabled, variant],
+  );
+
   return (
-    <ChipContext.Provider value={{ disabled, variant, color }}>
+    <ChipContext.Provider value={chipContextValue}>
       <ChipRoot
         as={component}
         className={clsx(classes.root, className)}

diff --git a/packages/mui-joy/src/FormControl/FormControl.tsx b/packages/mui-joy/src/FormControl/FormControl.tsx
@@ -79,8 +79,6 @@ const FormControl = React.forwardRef(function FormControl(inProps, ref) {
   } = props;
 
   const id = useId(idOverride);
-  const labelId = `${id}-label`;
-  const helperTextId = `${id}-helper-text`;
   const [helperText, setHelperText] = React.useState<HTMLElement | null>(null);
 
   const ownerState = {
@@ -117,21 +115,24 @@ const FormControl = React.forwardRef(function FormControl(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
+  const formControlContextValue = React.useMemo(
+    () => ({
+      disabled,
+      required,
+      error,
+      color,
+      size,
+      htmlFor: id,
+      labelId: `${id}-label`,
+      'aria-describedby': helperText ? `${id}-helper-text` : undefined,
+      setHelperText,
+      registerEffect: registerEffect!,
+    }),
+    [color, disabled, error, helperText, id, registerEffect, required, size],
+  );
+
   return (
-    <FormControlContext.Provider
-      value={{
-        disabled,
-        required,
-        error,
-        color,
-        size,
-        htmlFor: id,
-        labelId,
-        'aria-describedby': helperText ? helperTextId : undefined,
-        setHelperText,
-        registerEffect: registerEffect!,
-      }}
-    >
+    <FormControlContext.Provider value={formControlContextValue}>
       <FormControlRoot
         as={component}
         ownerState={ownerState}

diff --git a/packages/mui-joy/src/Menu/Menu.tsx b/packages/mui-joy/src/Menu/Menu.tsx
@@ -144,13 +144,16 @@ const Menu = React.forwardRef(function Menu(inProps, ref) {
     ownerState,
   });
 
-  const contextValue: MenuUnstyledContextType = {
-    registerItem,
-    unregisterItem,
-    getItemState,
-    getItemProps,
-    open,
-  };
+  const contextValue: MenuUnstyledContextType = React.useMemo(
+    () => ({
+      registerItem,
+      unregisterItem,
+      getItemState,
+      getItemProps,
+      open,
+    }),
+    [getItemProps, getItemState, open, registerItem, unregisterItem],
+  );
 
   return (
     <PopperUnstyled {...rootProps}>

diff --git a/packages/mui-joy/src/MenuList/MenuList.tsx b/packages/mui-joy/src/MenuList/MenuList.tsx
@@ -109,14 +109,18 @@ const MenuList = React.forwardRef(function MenuList(inProps, ref) {
     className: classes.root,
   });
 
-  const contextValue = {
-    registerItem,
-    unregisterItem,
-    getItemState,
-    getItemProps,
-    getListboxProps,
-    open: true,
-  } as MenuUnstyledContextType;
+  const contextValue = React.useMemo(
+    () =>
+      ({
+        registerItem,
+        unregisterItem,
+        getItemState,
+        getItemProps,
+        getListboxProps,
+        open: true,
+      } as MenuUnstyledContextType),
+    [getItemProps, getItemState, getListboxProps, registerItem, unregisterItem],
+  );
 
   return (
     <MenuListRoot {...listboxProps}>

diff --git a/packages/mui-joy/src/ModalDialog/ModalDialog.tsx b/packages/mui-joy/src/ModalDialog/ModalDialog.tsx
@@ -109,9 +109,11 @@ const ModalDialog = React.forwardRef(function ModalDialog(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
+  const contextValue = React.useMemo(() => ({ variant, color }), [color, variant]);
+
   return (
     <ModalDialogSizeContext.Provider value={size}>
-      <ModalDialogVariantColorContext.Provider value={{ variant, color }}>
+      <ModalDialogVariantColorContext.Provider value={contextValue}>
         <ModalDialogRoot
           as={component}
           ownerState={ownerState}