@mui/utils 6.1.2 → 6.1.3

package/CHANGELOG.md

@@ -1,5 +1,82 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.1.3
+
+<!-- generated comparing v6.1.2..master -->
+
+_Oct 9, 2024_
+
+A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Improved performance on styled components by pre-serializing and caching the styles (#43412) @romgrk
+
+### `@mui/material@6.1.3`
+
+- &#8203;<!-- 18 -->Change React.ReactElement<any> to React.ReactElement<unknown> (#43402) @sai6855
+- &#8203;<!-- 42 -->[Badge] Make keys in anchor origin partial (#43950) @sai6855
+- &#8203;<!-- 22 -->[Grid2] Fix column spacing for nested containers (#43733) @Janpot
+- &#8203;<!-- 21 -->[Grid2] Remove required `item` prop for `size` prop (#44027) @Janpot
+- &#8203;<!-- 20 -->[Grid2] Add compatible props warning (#43801) @k-rajat19
+- &#8203;<!-- 17 -->[Modal] Fix comment location (#44026) @oliviertassinari
+- &#8203;<!-- 16 -->[OutlinedInput] Resolve border color issue on mobile (#43797) (#43879) @wojtek35
+
+### `@mui/system@6.1.3`
+
+- &#8203;<!-- 15 -->Make createGrid compatible with React 19 types (#44035) @aarongarciah
+- &#8203;<!-- 14 -->Add empty interfaces to fix issue with typescript module augmentation (#43873) @yonatan0
+- &#8203;<!-- 13 -->Pre-serialize & cache styles to improve performance (#43412) @romgrk
+- &#8203;<!-- 09 -->[typescript] `SystemCSSProperties` should not have `SystemStyleObject` as value (#44029) @siriwatknp
+
+### `@mui/utils@6.0.0-beta.11`
+
+- &#8203;<!-- 08 -->[utils] Make getReactElementRef React 19 compatible (#44034) @aarongarciah
+
+### `@mui/lab@6.1.3`
+
+- &#8203;<!-- 20 -->[lab][Timeline] Fix types for React 19 (#44043) @aarongarciah
+
+### Docs
+
+- &#8203;<!-- 35 -->Update docs-infra role (#44032) @mnajdova
+- &#8203;<!-- 34 -->Update Material Symbols plan to reflect Google development (#44000) @oliviertassinari
+- &#8203;<!-- 33 -->Fix 301 redirections in docs @oliviertassinari
+- &#8203;<!-- 32 -->Fix indentation @oliviertassinari
+- &#8203;<!-- 31 -->Fix Live edit copies (#43835) @oliviertassinari
+- &#8203;<!-- 30 -->Virtualize icons svg (#43939) @Janpot
+- &#8203;<!-- 28 -->[Grid] Fix Grid2 gap description (#43967) @aarongarciah
+- &#8203;<!-- 27 -->[icons] Index search synchronously (#44001) @oliviertassinari
+- &#8203;<!-- 26 -->[material-ui] Incorrect React useState Example on Toggle Button (#43987) @barrownicholas
+- &#8203;<!-- 25 -->[material-ui] Add theme setting for pigment-css migration (#43993) @effektsvk
+- &#8203;<!-- 24 -->[material-ui] Fix incorrect `slotProp` name in the `TextField` deprecation note. (#43985) @Chee7ah
+- &#8203;<!-- 23 -->[examples] Use CSS Variables (#43856) @Juneezee
+- &#8203;<!-- 29 -->[material-ui] Improved documentation for indeterminateIcon prop (#43791) @marctaylor01
+
+### Core
+
+- &#8203;<!-- 37 -->Fix typo in useLocalStorageState (#44024) @hieunguyenduc696
+- &#8203;<!-- 36 -->Amend changelog (#43968) @aarongarciah
+- &#8203;<!-- 41 -->Remove `@mui/styled-engine-sc` dev dependency from `@mui/styled-engine-sc` (#44050) @Janpot
+- &#8203;<!-- 43 -->[docs-infra] Add pointer cursor on hover for logo to improve UX (#43999) @Asin-Junior-Honore
+- &#8203;<!-- 41 -->[blog] Migrate some .gif to <video> (#43945) @oliviertassinari
+- &#8203;<!-- 40 -->[code-infra] Align `next` dependency specifier across project (#44036) @Janpot
+- &#8203;<!-- 39 -->[code-infra] Move MuiError babel macro to babel plugin (#43904) @Janpot
+- &#8203;<!-- 38 -->[code-infra] Forbid calling `Error` without `new` (#43963) @Janpot
+- &#8203;<!-- 29 -->[docs-infra] Fix link in header regression (#43834) @oliviertassinari
+- &#8203;<!-- 19 -->[infra] Fix line break in Stack Overflow message @oliviertassinari
+- &#8203;<!-- 12 -->[test] Add missing async (#44028) @oliviertassinari
+- &#8203;<!-- 11 -->[test] Fix Escape event firing event (#43961) @oliviertassinari
+- &#8203;<!-- 10 -->[test] Fix flaky pigment-css screenshot (#43959) @Janpot
+- &#8203;<!-- 07 -->[website] Add missing \_redirects HTTP status @oliviertassinari
+- &#8203;<!-- 06 -->[website] Fix sponsor image height @oliviertassinari
+- &#8203;<!-- 05 -->[website] Remove srcset, does nothing in README @oliviertassinari
+- &#8203;<!-- 04 -->[website] Polish display of sponsors @oliviertassinari
+- &#8203;<!-- 03 -->[website] Standardize utm tags @oliviertassinari
+- &#8203;<!-- 02 -->[website] Improve utm_source strategy @oliviertassinari
+- &#8203;<!-- 01 -->[website] Clarify min-level docs-infra @oliviertassinari
+- &#8203;<!-- 08 -->[website] Update backlink sponsors (#43995) @rluzists1
+
+All contributors of this release in alphabetical order: @aarongarciah, @Asin-Junior-Honore, @barrownicholas, @Chee7ah, @effektsvk, @hieunguyenduc696, @Janpot, @Juneezee, @k-rajat19, @mnajdova, @oliviertassinari, @romgrk, @sai6855, @siriwatknp, @wojtek35, @yonatan0
+
 ## v6.1.2
 
 <!-- generated comparing v6.1.1..master -->
@@ -10,16 +87,12 @@ A big thanks to the 13 contributors who made this release possible.
 
 ### `@mui/material@6.1.2`
 
-- [Modal] Remove unnecessary `manager` prop handling (#43867) @ZeeshanTamboli
 - [Autocomplete] Fix listbox opens and closes on click when used with `limitTags` (#42494) @appleSimple
 - [Button] Ignore `dark` and `contrastText` if not provided in the theme (#43861) @siriwatknp
 - [Button] Fix regression for color `inherit` (#43862) @siriwatknp
 - [LinearProgress] Fix background color (#43949) @sai6855
 - Support CSS variables with shadow DOM (#43948) @siriwatknp
-- Improve getReactElementRef() utils (#43022) @sai6855
-- [Modal] Replace `show` parameter name with `hide` in modal manager (#43868) @ZeeshanTamboli
 - [Rating] Use Rating `name` as prefix of input element ids (#43829) @yash49
-- [Drawer] Refactor getScrollbarSize usages (#43828) @BrianWoolfolk
 - [Drawer] Fix issue with main window being used instead of iframe's window (#43818) @albarv340
 - [ThemeProvider] Support setting default mode (#43951) @siriwatknp
 
@@ -56,9 +129,10 @@ A big thanks to the 13 contributors who made this release possible.
 - [icons] Reduce Material Icon page size (#43911) @oliviertassinari
 - [test] Point Istanbul to correct URL (#43935) @sai6855
 - [test] Sync React.version parse logic with codebase (#43820) @oliviertassinari
-- [website] Add 'Row spanning' (#43831) @oliviertassinari
-- [website] Improve Next roles section (#43822) @oliviertassinari
-- [website] Open the xCharts, eXplore and X general react engineer roles (#43805) @DanailH
+- Improve getReactElementRef() utils (#43022) @sai6855
+- [Drawer] Refactor getScrollbarSize usages (#43828) @BrianWoolfolk
+- [Modal] Replace `show` parameter name with `hide` in modal manager (#43868) @ZeeshanTamboli
+- [Modal] Remove unnecessary `manager` prop handling (#43867) @ZeeshanTamboli
 
 All contributors of this release in alphabetical order: @albarv340, @appleSimple, @BrianWoolfolk, @DanailH, @Janpot, @kdichev, @oliviertassinari, @sai6855, @samuelsycamore, @siriwatknp, @wilhelmlofsten, @yash49, @ZeeshanTamboli
 

package/capitalize/capitalize.js

@@ -12,7 +12,7 @@ var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatM
 // We only handle the first word.
 function capitalize(string) {
   if (typeof string !== 'string') {
-    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`capitalize(string)\` expects a string argument.` : (0, _formatMuiErrorMessage2.default)(7));
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `capitalize(string)` expects a string argument.' : (0, _formatMuiErrorMessage2.default)(7));
   }
   return string.charAt(0).toUpperCase() + string.slice(1);
 }

package/esm/capitalize/capitalize.js

@@ -5,7 +5,7 @@ import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 // We only handle the first word.
 export default function capitalize(string) {
   if (typeof string !== 'string') {
-    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`capitalize(string)\` expects a string argument.` : _formatMuiErrorMessage(7));
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `capitalize(string)` expects a string argument.' : _formatMuiErrorMessage(7));
   }
   return string.charAt(0).toUpperCase() + string.slice(1);
 }

package/esm/formatMuiErrorMessage/formatMuiErrorMessage.js

@@ -1,19 +1,15 @@
 /**
- * WARNING: Don't import this directly.
- * Use `MuiError` from `@mui/internal-babel-macros/MuiError.macro` instead.
+ * WARNING: Don't import this directly. It's imported by the code generated by
+ * `@mui/interal-babel-plugin-minify-errors`. Make sure to always use string literals in `Error`
+ * constructors to ensure the plugin works as expected. Supported patterns include:
+ *   throw new Error('My message');
+ *   throw new Error(`My message: ${foo}`);
+ *   throw new Error(`My message: ${foo}` + 'another string');
+ *   ...
  * @param {number} code
  */
-export default function formatMuiErrorMessage(code) {
-  // Apply babel-plugin-transform-template-literals in loose mode
-  // loose mode is safe if we're concatenating primitives
-  // see https://babeljs.io/docs/en/babel-plugin-transform-template-literals#loose
-  /* eslint-disable prefer-template */
-  let url = 'https://mui.com/production-error/?code=' + code;
-  for (let i = 1; i < arguments.length; i += 1) {
-    // rest params over-transpile for this case
-    // eslint-disable-next-line prefer-rest-params
-    url += '&args[]=' + encodeURIComponent(arguments[i]);
-  }
-  return 'Minified MUI error #' + code + '; visit ' + url + ' for the full message.';
-  /* eslint-enable prefer-template */
+export default function formatMuiErrorMessage(code, ...args) {
+  const url = new URL(`https://mui.com/production-error/?code=${code}`);
+  args.forEach(arg => url.searchParams.append('args[]', arg));
+  return `Minified MUI error #${code}; visit ${url} for the full message.`;
 }

package/esm/getReactElementRef/getReactElementRef.js

@@ -5,14 +5,14 @@ import * as React from 'react';
  * It will throw runtime error if the element is not a valid React element.
  *
  * @param element React.ReactElement
- * @returns React.Ref<any> | null | undefined
+ * @returns React.Ref<any> | null
  */
 export default function getReactElementRef(element) {
   // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in older versions
   if (parseInt(React.version, 10) >= 19) {
-    return element.props?.ref;
+    return element?.props?.ref || null;
   }
   // @ts-expect-error element.ref is not included in the ReactElement type
   // https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/70189
-  return element?.ref;
+  return element?.ref || null;
 }

package/esm/useLocalStorageState/useLocalStorageState.js

@@ -28,20 +28,20 @@ function emitCurrentTabStorageChange(key) {
     listeners.forEach(listener => listener());
   }
 }
-function subscribe(area, key, callbark) {
+function subscribe(area, key, callback) {
   if (!key) {
     return () => {};
   }
   const storageHandler = event => {
     if (event.storageArea === area && event.key === key) {
-      callbark();
+      callback();
     }
   };
   window.addEventListener('storage', storageHandler);
-  onCurrentTabStorageChange(key, callbark);
+  onCurrentTabStorageChange(key, callback);
   return () => {
     window.removeEventListener('storage', storageHandler);
-    offCurrentTabStorageChange(key, callbark);
+    offCurrentTabStorageChange(key, callback);
   };
 }
 function getSnapshot(area, key) {
@@ -89,7 +89,7 @@ function useLocalStorageStateServer() {
 function useLocalStorageStateBrowser(key, initializer = null) {
   const [initialValue] = React.useState(initializer);
   const area = window.localStorage;
-  const subscribeKey = React.useCallback(callbark => subscribe(area, key, callbark), [area, key]);
+  const subscribeKey = React.useCallback(callback => subscribe(area, key, callback), [area, key]);
   const getKeySnapshot = React.useCallback(() => getSnapshot(area, key) ?? initialValue, [area, initialValue, key]);
 
   // Start with null for the hydration, and then switch to the actual value.

package/formatMuiErrorMessage/formatMuiErrorMessage.d.ts

@@ -1,6 +1,11 @@
 /**
- * WARNING: Don't import this directly.
- * Use `MuiError` from `@mui/internal-babel-macros/MuiError.macro` instead.
+ * WARNING: Don't import this directly. It's imported by the code generated by
+ * `@mui/interal-babel-plugin-minify-errors`. Make sure to always use string literals in `Error`
+ * constructors to ensure the plugin works as expected. Supported patterns include:
+ *   throw new Error('My message');
+ *   throw new Error(`My message: ${foo}`);
+ *   throw new Error(`My message: ${foo}` + 'another string');
+ *   ...
  * @param {number} code
  */
-export default function formatMuiErrorMessage(code: number): string;
+export default function formatMuiErrorMessage(code: number, ...args: string[]): string;

package/formatMuiErrorMessage/formatMuiErrorMessage.js

@@ -5,21 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = formatMuiErrorMessage;
 /**
- * WARNING: Don't import this directly.
- * Use `MuiError` from `@mui/internal-babel-macros/MuiError.macro` instead.
+ * WARNING: Don't import this directly. It's imported by the code generated by
+ * `@mui/interal-babel-plugin-minify-errors`. Make sure to always use string literals in `Error`
+ * constructors to ensure the plugin works as expected. Supported patterns include:
+ *   throw new Error('My message');
+ *   throw new Error(`My message: ${foo}`);
+ *   throw new Error(`My message: ${foo}` + 'another string');
+ *   ...
  * @param {number} code
  */
-function formatMuiErrorMessage(code) {
-  // Apply babel-plugin-transform-template-literals in loose mode
-  // loose mode is safe if we're concatenating primitives
-  // see https://babeljs.io/docs/en/babel-plugin-transform-template-literals#loose
-  /* eslint-disable prefer-template */
-  let url = 'https://mui.com/production-error/?code=' + code;
-  for (let i = 1; i < arguments.length; i += 1) {
-    // rest params over-transpile for this case
-    // eslint-disable-next-line prefer-rest-params
-    url += '&args[]=' + encodeURIComponent(arguments[i]);
-  }
-  return 'Minified MUI error #' + code + '; visit ' + url + ' for the full message.';
-  /* eslint-enable prefer-template */
+function formatMuiErrorMessage(code, ...args) {
+  const url = new URL(`https://mui.com/production-error/?code=${code}`);
+  args.forEach(arg => url.searchParams.append('args[]', arg));
+  return `Minified MUI error #${code}; visit ${url} for the full message.`;
 }

package/getReactElementRef/getReactElementRef.d.ts

@@ -4,6 +4,6 @@ import * as React from 'react';
  * It will throw runtime error if the element is not a valid React element.
  *
  * @param element React.ReactElement
- * @returns React.Ref<any> | null | undefined
+ * @returns React.Ref<any> | null
  */
-export default function getReactElementRef(element: React.ReactElement): React.Ref<any> | null | undefined;
+export default function getReactElementRef(element: React.ReactElement): React.Ref<any> | null;

package/getReactElementRef/getReactElementRef.js

@@ -11,14 +11,14 @@ var React = _interopRequireWildcard(require("react"));
  * It will throw runtime error if the element is not a valid React element.
  *
  * @param element React.ReactElement
- * @returns React.Ref<any> | null | undefined
+ * @returns React.Ref<any> | null
  */
 function getReactElementRef(element) {
   // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in older versions
   if (parseInt(React.version, 10) >= 19) {
-    return element.props?.ref;
+    return element?.props?.ref || null;
   }
   // @ts-expect-error element.ref is not included in the ReactElement type
   // https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/70189
-  return element?.ref;
+  return element?.ref || null;
 }

package/getValidReactChildren/getValidReactChildren.d.ts

@@ -5,4 +5,4 @@ import * as React from 'react';
  *
  * @param children the children
  */
-export default function getValidReactChildren(children: React.ReactNode): React.ReactElement<any>[];
+export default function getValidReactChildren(children: React.ReactNode): React.ReactElement<unknown>[];

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/utils v6.1.2
+ * @mui/utils v6.1.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/capitalize/capitalize.js

@@ -5,7 +5,7 @@ import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 // We only handle the first word.
 export default function capitalize(string) {
   if (typeof string !== 'string') {
-    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`capitalize(string)\` expects a string argument.` : _formatMuiErrorMessage(7));
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `capitalize(string)` expects a string argument.' : _formatMuiErrorMessage(7));
   }
   return string.charAt(0).toUpperCase() + string.slice(1);
 }

package/modern/formatMuiErrorMessage/formatMuiErrorMessage.js

@@ -1,19 +1,15 @@
 /**
- * WARNING: Don't import this directly.
- * Use `MuiError` from `@mui/internal-babel-macros/MuiError.macro` instead.
+ * WARNING: Don't import this directly. It's imported by the code generated by
+ * `@mui/interal-babel-plugin-minify-errors`. Make sure to always use string literals in `Error`
+ * constructors to ensure the plugin works as expected. Supported patterns include:
+ *   throw new Error('My message');
+ *   throw new Error(`My message: ${foo}`);
+ *   throw new Error(`My message: ${foo}` + 'another string');
+ *   ...
  * @param {number} code
  */
-export default function formatMuiErrorMessage(code) {
-  // Apply babel-plugin-transform-template-literals in loose mode
-  // loose mode is safe if we're concatenating primitives
-  // see https://babeljs.io/docs/en/babel-plugin-transform-template-literals#loose
-  /* eslint-disable prefer-template */
-  let url = 'https://mui.com/production-error/?code=' + code;
-  for (let i = 1; i < arguments.length; i += 1) {
-    // rest params over-transpile for this case
-    // eslint-disable-next-line prefer-rest-params
-    url += '&args[]=' + encodeURIComponent(arguments[i]);
-  }
-  return 'Minified MUI error #' + code + '; visit ' + url + ' for the full message.';
-  /* eslint-enable prefer-template */
+export default function formatMuiErrorMessage(code, ...args) {
+  const url = new URL(`https://mui.com/production-error/?code=${code}`);
+  args.forEach(arg => url.searchParams.append('args[]', arg));
+  return `Minified MUI error #${code}; visit ${url} for the full message.`;
 }

package/modern/getReactElementRef/getReactElementRef.js

@@ -5,14 +5,14 @@ import * as React from 'react';
  * It will throw runtime error if the element is not a valid React element.
  *
  * @param element React.ReactElement
- * @returns React.Ref<any> | null | undefined
+ * @returns React.Ref<any> | null
  */
 export default function getReactElementRef(element) {
   // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in older versions
   if (parseInt(React.version, 10) >= 19) {
-    return element.props?.ref;
+    return element?.props?.ref || null;
   }
   // @ts-expect-error element.ref is not included in the ReactElement type
   // https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/70189
-  return element?.ref;
+  return element?.ref || null;
 }

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/utils v6.1.2
+ * @mui/utils v6.1.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/useLocalStorageState/useLocalStorageState.js

@@ -28,20 +28,20 @@ function emitCurrentTabStorageChange(key) {
     listeners.forEach(listener => listener());
   }
 }
-function subscribe(area, key, callbark) {
+function subscribe(area, key, callback) {
   if (!key) {
     return () => {};
   }
   const storageHandler = event => {
     if (event.storageArea === area && event.key === key) {
-      callbark();
+      callback();
     }
   };
   window.addEventListener('storage', storageHandler);
-  onCurrentTabStorageChange(key, callbark);
+  onCurrentTabStorageChange(key, callback);
   return () => {
     window.removeEventListener('storage', storageHandler);
-    offCurrentTabStorageChange(key, callbark);
+    offCurrentTabStorageChange(key, callback);
   };
 }
 function getSnapshot(area, key) {
@@ -89,7 +89,7 @@ function useLocalStorageStateServer() {
 function useLocalStorageStateBrowser(key, initializer = null) {
   const [initialValue] = React.useState(initializer);
   const area = window.localStorage;
-  const subscribeKey = React.useCallback(callbark => subscribe(area, key, callbark), [area, key]);
+  const subscribeKey = React.useCallback(callback => subscribe(area, key, callback), [area, key]);
   const getKeySnapshot = React.useCallback(() => getSnapshot(area, key) ?? initialValue, [area, initialValue, key]);
 
   // Start with null for the hydration, and then switch to the actual value.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/utils",
-  "version": "6.1.2",
+  "version": "6.1.3",
   "private": false,
   "author": "MUI Team",
   "description": "Utility functions for React components.",
@@ -31,7 +31,7 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-is": "^18.3.1",
-    "@mui/types": "^7.2.17"
+    "@mui/types": "^7.2.18"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",

package/useLocalStorageState/useLocalStorageState.js

@@ -33,20 +33,20 @@ function emitCurrentTabStorageChange(key) {
     listeners.forEach(listener => listener());
   }
 }
-function subscribe(area, key, callbark) {
+function subscribe(area, key, callback) {
   if (!key) {
     return () => {};
   }
   const storageHandler = event => {
     if (event.storageArea === area && event.key === key) {
-      callbark();
+      callback();
     }
   };
   window.addEventListener('storage', storageHandler);
-  onCurrentTabStorageChange(key, callbark);
+  onCurrentTabStorageChange(key, callback);
   return () => {
     window.removeEventListener('storage', storageHandler);
-    offCurrentTabStorageChange(key, callbark);
+    offCurrentTabStorageChange(key, callback);
   };
 }
 function getSnapshot(area, key) {
@@ -94,7 +94,7 @@ function useLocalStorageStateServer() {
 function useLocalStorageStateBrowser(key, initializer = null) {
   const [initialValue] = React.useState(initializer);
   const area = window.localStorage;
-  const subscribeKey = React.useCallback(callbark => subscribe(area, key, callbark), [area, key]);
+  const subscribeKey = React.useCallback(callback => subscribe(area, key, callback), [area, key]);
   const getKeySnapshot = React.useCallback(() => getSnapshot(area, key) ?? initialValue, [area, initialValue, key]);
 
   // Start with null for the hydration, and then switch to the actual value.