Use layout effect to set ids

mui · Jun 13, 2024 · 0a0eb8e · 0a0eb8e
1 parent 6c9f081
commit 0a0eb8e
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 16 deletions.
diff --git a/packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.tsx b/packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.tsx
@@ -6,19 +6,23 @@ import type {
 } from './AlertDialogDescription.types';
 import { useAlertDialogRootContext } from '../Root/AlertDialogRootContext';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
+import { useId } from '../../utils/useId';
 
 const AlertDialogDescription = React.forwardRef(function AlertDialogDescription(
   props: AlertDialogDescriptionProps,
   forwardedRef: React.ForwardedRef<HTMLParagraphElement>,
 ) {
-  const { render, className, id, ...other } = props;
+  const { render, className, id: idProp, ...other } = props;
   const { setDescriptionElementId, open } = useAlertDialogRootContext();
 
   const ownerState: AlertDialogDescriptionOwnerState = {
     open,
   };
 
-  React.useEffect(() => {
+  const id = useId(idProp);
+
+  useEnhancedEffect(() => {
     setDescriptionElementId(id);
     return () => {
       setDescriptionElementId(undefined);

diff --git a/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.tsx b/packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.tsx
@@ -15,7 +15,7 @@ const AlertDialogPopup = React.forwardRef(function AlertDialogPopup(
     animated = true,
     className,
     container,
-    id: idProp,
+    id,
     keepMounted = false,
     render,
     ...other
@@ -25,7 +25,7 @@ const AlertDialogPopup = React.forwardRef(function AlertDialogPopup(
   const { open, nestedOpenDialogCount } = rootContext;
 
   const { getRootProps, floatingContext, mounted, transitionStatus } = useDialogPopup({
-    id: idProp,
+    id,
     animated,
     ref: forwardedRef,
     dismissible: false,

diff --git a/packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.tsx b/packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.tsx
@@ -3,19 +3,23 @@ import PropTypes from 'prop-types';
 import type { AlertDialogTitleOwnerState, AlertDialogTitleProps } from './AlertDialogTitle.types';
 import { useAlertDialogRootContext } from '../Root/AlertDialogRootContext';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
+import { useId } from '../../utils/useId';
 
 const AlertDialogTitle = React.forwardRef(function AlertDialogTitle(
   props: AlertDialogTitleProps,
   forwardedRef: React.ForwardedRef<HTMLParagraphElement>,
 ) {
-  const { render, className, id, ...other } = props;
+  const { render, className, id: idProp, ...other } = props;
   const { setTitleElementId, open } = useAlertDialogRootContext();
 
   const ownerState: AlertDialogTitleOwnerState = {
     open,
   };
 
-  React.useEffect(() => {
+  const id = useId(idProp);
+
+  useEnhancedEffect(() => {
     setTitleElementId(id);
     return () => {
       setTitleElementId(undefined);

diff --git a/packages/mui-base/src/Dialog/Backdrop/useDialogBackdrop.ts b/packages/mui-base/src/Dialog/Backdrop/useDialogBackdrop.ts
@@ -4,6 +4,7 @@ import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useAnimatedElement } from '../../utils/useAnimatedElement';
 import { useForkRef } from '../../utils/useForkRef';
 import { useEventCallback } from '../../utils/useEventCallback';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 
 /**
  *
@@ -26,7 +27,7 @@ export function useDialogBackdrop(params: UseDialogBackdropParams): UseDialogBac
   const onMount = useEventCallback(onMountParam);
   const onUnmount = useEventCallback(onUnmountParam);
 
-  React.useEffect(() => {
+  useEnhancedEffect(() => {
     onMount();
 
     return onUnmount;

diff --git a/packages/mui-base/src/Dialog/Description/DialogDescription.tsx b/packages/mui-base/src/Dialog/Description/DialogDescription.tsx
@@ -1,21 +1,26 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import type { DialogDescriptionProps } from './DialogDescription.types';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useDialogRootContext } from '../Root/DialogRootContext';
+import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
+import { useId } from '../../utils/useId';
 
 const DialogDescription = React.forwardRef(function DialogDescription(
   props: DialogDescriptionProps,
   forwardedRef: React.ForwardedRef<HTMLParagraphElement>,
 ) {
-  const { render, className, id, ...other } = props;
+  const { render, className, id: idProp, ...other } = props;
   const { setDescriptionElementId, open, modal } = useDialogRootContext();
+
   const ownerState = {
     open,
     modal,
   };
 
-  React.useEffect(() => {
+  const id = useId(idProp);
+
+  useEnhancedEffect(() => {
     setDescriptionElementId(id);
     return () => {
       setDescriptionElementId(undefined);

diff --git a/packages/mui-base/src/Dialog/Popup/DialogPopup.tsx b/packages/mui-base/src/Dialog/Popup/DialogPopup.tsx
@@ -15,7 +15,7 @@ const DialogPopup = React.forwardRef(function DialogPopup(
     animated = true,
     className,
     container,
-    id: idProp,
+    id,
     keepMounted = false,
     render,
     ...other
@@ -24,7 +24,7 @@ const DialogPopup = React.forwardRef(function DialogPopup(
   const { open, modal, nestedOpenDialogCount, dismissible } = rootContext;
 
   const { getRootProps, floatingContext, mounted, transitionStatus } = useDialogPopup({
-    id: idProp,
+    id,
     animated,
     ref: forwardedRef,
     isTopmost: nestedOpenDialogCount === 0,

diff --git a/packages/mui-base/src/Dialog/Popup/useDialogPopup.tsx b/packages/mui-base/src/Dialog/Popup/useDialogPopup.tsx
@@ -6,6 +6,7 @@ import { useForkRef } from '../../utils/useForkRef';
 import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useAnimatedElement } from '../../utils/useAnimatedElement';
 import { useScrollLock } from '../../utils/useScrollLock';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 
 /**
  *
@@ -57,7 +58,7 @@ export function useDialogPopup(parameters: UseDialogPopupParameters): UseDialogP
 
   useScrollLock(modal && mounted);
 
-  React.useEffect(() => {
+  useEnhancedEffect(() => {
     setPopupElementId(id);
     return () => {
       setPopupElementId(undefined);

diff --git a/packages/mui-base/src/Dialog/Title/DialogTitle.tsx b/packages/mui-base/src/Dialog/Title/DialogTitle.tsx
@@ -1,22 +1,26 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import type { DialogTitleProps } from './DialogTitle.types';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useDialogRootContext } from '../Root/DialogRootContext';
+import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
+import { useId } from '../../utils/useId';
 
 const DialogTitle = React.forwardRef(function DialogTitle(
   props: DialogTitleProps,
   forwardedRef: React.ForwardedRef<HTMLParagraphElement>,
 ) {
-  const { render, className, id, ...other } = props;
+  const { render, className, id: idProp, ...other } = props;
   const { setTitleElementId, open, modal } = useDialogRootContext();
 
   const ownerState = {
     open,
     modal,
   };
 
-  React.useEffect(() => {
+  const id = useId(idProp);
+
+  useEnhancedEffect(() => {
     setTitleElementId(id);
     return () => {
       setTitleElementId(undefined);