From b3ab4cfe183fb874643b74df4e80792def55c394 Mon Sep 17 00:00:00 2001
From: Diego Andai <diego@mui.com>
Date: Mon, 9 Dec 2024 13:06:05 -0300
Subject: [PATCH] [core] React 19 useRef cleanup (#44704)

---
 docs/data/joy/components/button-group/SplitButton.tsx       | 2 +-
 docs/data/joy/components/input/DebouncedInput.tsx           | 4 +---
 docs/data/joy/components/input/InputSlotProps.tsx           | 2 +-
 docs/data/joy/components/snackbar/SnackbarHideDuration.tsx  | 2 +-
 docs/data/joy/components/textarea/TextareaRef.tsx           | 2 +-
 .../material/components/popper/VirtualElementPopper.tsx     | 2 +-
 .../material/components/progress/CircularIntegration.tsx    | 2 +-
 .../material/components/progress/DelayingAppearance.tsx     | 4 +---
 docs/pages/blog.tsx                                         | 2 +-
 docs/pages/experiments/joy/style-guide.tsx                  | 2 +-
 docs/src/components/header/HeaderNavBar.tsx                 | 4 ++--
 docs/src/components/pricing/PricingTable.tsx                | 2 +-
 docs/src/components/productBaseUI/BaseUICustomization.tsx   | 2 +-
 docs/src/components/productMaterial/MaterialStyling.tsx     | 4 ++--
 docs/src/modules/components/JoyThemeBuilder.tsx             | 6 +++---
 packages/mui-base/CONTRIBUTING.md                           | 2 +-
 packages/mui-base/src/Button/Button.tsx                     | 2 +-
 packages/mui-base/src/FocusTrap/FocusTrap.tsx               | 6 +++---
 packages/mui-base/src/Tab/Tab.tsx                           | 2 +-
 packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx | 2 +-
 packages/mui-base/src/unstable_useModal/useModal.ts         | 2 +-
 packages/mui-base/src/useButton/useButton.ts                | 2 +-
 packages/mui-base/src/useDropdown/useDropdown.ts            | 2 +-
 packages/mui-base/src/useSlider/useSlider.ts                | 6 +++---
 packages/mui-base/src/useSwitch/useSwitch.ts                | 2 +-
 packages/mui-base/src/utils/useControllableReducer.ts       | 2 +-
 packages/mui-base/src/utils/useMessageBus.ts                | 2 +-
 packages/mui-docs/src/Ad/Ad.tsx                             | 2 +-
 packages/mui-docs/src/CodeCopy/CodeCopy.tsx                 | 2 +-
 packages/mui-docs/src/CodeCopy/useClipboardCopy.ts          | 2 +-
 packages/mui-joy/src/Tab/Tab.tsx                            | 2 +-
 packages/mui-joy/src/Tooltip/Tooltip.tsx                    | 2 +-
 packages/mui-material/src/Modal/useModal.ts                 | 2 +-
 packages/mui-material/src/Popper/BasePopper.tsx             | 2 +-
 packages/mui-material/src/Popper/Popper.spec.tsx            | 2 +-
 packages/mui-material/src/Slider/useSlider.ts               | 6 +++---
 .../mui-material/src/TextareaAutosize/TextareaAutosize.tsx  | 2 +-
 packages/mui-material/src/Unstable_TrapFocus/FocusTrap.tsx  | 6 +++---
 packages/mui-material/test/typescript/index.spec.tsx        | 4 ++--
 packages/mui-utils/src/setRef/setRef.spec.tsx               | 2 +-
 test/integration/material-ui/components.spec.tsx            | 2 +-
 41 files changed, 54 insertions(+), 58 deletions(-)

diff --git a/docs/data/joy/components/button-group/SplitButton.tsx b/docs/data/joy/components/button-group/SplitButton.tsx
index 0f7b6521af3dce..52198e2b509d43 100644
--- a/docs/data/joy/components/button-group/SplitButton.tsx
+++ b/docs/data/joy/components/button-group/SplitButton.tsx
@@ -10,7 +10,7 @@ const options = ['Create a merge commit', 'Squash and merge', 'Rebase and merge'
 
 export default function SplitButton() {
   const [open, setOpen] = React.useState(false);
-  const actionRef = React.useRef<() => void | null>(null);
+  const actionRef = React.useRef<() => void>(null);
   const anchorRef = React.useRef<HTMLDivElement>(null);
   const [selectedIndex, setSelectedIndex] = React.useState(1);
 
diff --git a/docs/data/joy/components/input/DebouncedInput.tsx b/docs/data/joy/components/input/DebouncedInput.tsx
index d171661866bf7c..ab8b8d8f6ab5af 100644
--- a/docs/data/joy/components/input/DebouncedInput.tsx
+++ b/docs/data/joy/components/input/DebouncedInput.tsx
@@ -11,9 +11,7 @@ type DebounceProps = {
 function DebounceInput(props: InputProps & DebounceProps) {
   const { handleDebounce, debounceTimeout, ...other } = props;
 
-  const timerRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(
-    undefined,
-  );
+  const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     clearTimeout(timerRef.current);
diff --git a/docs/data/joy/components/input/InputSlotProps.tsx b/docs/data/joy/components/input/InputSlotProps.tsx
index 76b7e2c8a5354c..29b0bc75805783 100644
--- a/docs/data/joy/components/input/InputSlotProps.tsx
+++ b/docs/data/joy/components/input/InputSlotProps.tsx
@@ -3,7 +3,7 @@ import Input from '@mui/joy/Input';
 import Stack from '@mui/joy/Stack';
 
 export default function InputSlotProps() {
-  const inputRef = React.useRef<HTMLInputElement | null>(null);
+  const inputRef = React.useRef<HTMLInputElement>(null);
   return (
     <Stack spacing={1.5} sx={{ minWidth: 300 }}>
       <Input
diff --git a/docs/data/joy/components/snackbar/SnackbarHideDuration.tsx b/docs/data/joy/components/snackbar/SnackbarHideDuration.tsx
index 8f03e03aae64e8..961aa911a8feba 100644
--- a/docs/data/joy/components/snackbar/SnackbarHideDuration.tsx
+++ b/docs/data/joy/components/snackbar/SnackbarHideDuration.tsx
@@ -10,7 +10,7 @@ export default function SnackbarHideDuration() {
   const [open, setOpen] = React.useState(false);
   const [duration, setDuration] = React.useState<undefined | number>();
   const [left, setLeft] = React.useState<undefined | number>();
-  const timer = React.useRef<ReturnType<typeof setInterval> | undefined>(undefined);
+  const timer = React.useRef<ReturnType<typeof setInterval>>(undefined);
   const countdown = () => {
     timer.current = setInterval(() => {
       setLeft((prev) => (prev === undefined ? prev : Math.max(0, prev - 100)));
diff --git a/docs/data/joy/components/textarea/TextareaRef.tsx b/docs/data/joy/components/textarea/TextareaRef.tsx
index 31ab292a899a18..e5b08f18970e1d 100644
--- a/docs/data/joy/components/textarea/TextareaRef.tsx
+++ b/docs/data/joy/components/textarea/TextareaRef.tsx
@@ -4,7 +4,7 @@ import Textarea from '@mui/joy/Textarea';
 import Stack from '@mui/joy/Stack';
 
 export default function TextareaRef() {
-  const textareaRef = React.useRef<HTMLTextAreaElement | null>(null);
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
 
   const handleTextareaFocus = () => {
     textareaRef.current?.focus();
diff --git a/docs/data/material/components/popper/VirtualElementPopper.tsx b/docs/data/material/components/popper/VirtualElementPopper.tsx
index 2c0eae47e0d5d0..634a940c4445aa 100644
--- a/docs/data/material/components/popper/VirtualElementPopper.tsx
+++ b/docs/data/material/components/popper/VirtualElementPopper.tsx
@@ -8,7 +8,7 @@ export default function VirtualElementPopper() {
   const [open, setOpen] = React.useState(false);
   const [anchorEl, setAnchorEl] = React.useState<PopperProps['anchorEl']>(null);
 
-  const previousAnchorElPosition = React.useRef<DOMRect | undefined>(undefined);
+  const previousAnchorElPosition = React.useRef<DOMRect>(undefined);
 
   React.useEffect(() => {
     if (anchorEl) {
diff --git a/docs/data/material/components/progress/CircularIntegration.tsx b/docs/data/material/components/progress/CircularIntegration.tsx
index c0e3761c48905b..5f6020368f8e3c 100644
--- a/docs/data/material/components/progress/CircularIntegration.tsx
+++ b/docs/data/material/components/progress/CircularIntegration.tsx
@@ -10,7 +10,7 @@ import SaveIcon from '@mui/icons-material/Save';
 export default function CircularIntegration() {
   const [loading, setLoading] = React.useState(false);
   const [success, setSuccess] = React.useState(false);
-  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const timer = React.useRef<ReturnType<typeof setTimeout>>(undefined);
 
   const buttonSx = {
     ...(success && {
diff --git a/docs/data/material/components/progress/DelayingAppearance.tsx b/docs/data/material/components/progress/DelayingAppearance.tsx
index 024769f55ca7a0..986578b2e4e1c1 100644
--- a/docs/data/material/components/progress/DelayingAppearance.tsx
+++ b/docs/data/material/components/progress/DelayingAppearance.tsx
@@ -8,9 +8,7 @@ import Typography from '@mui/material/Typography';
 export default function DelayingAppearance() {
   const [loading, setLoading] = React.useState(false);
   const [query, setQuery] = React.useState('idle');
-  const timerRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(
-    undefined,
-  );
+  const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
 
   React.useEffect(
     () => () => {
diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx
index e2d504dcfae573..1e65953edadc30 100644
--- a/docs/pages/blog.tsx
+++ b/docs/pages/blog.tsx
@@ -169,7 +169,7 @@ const PAGE_SIZE = 7;
 
 export default function Blog(props: InferGetStaticPropsType<typeof getStaticProps>) {
   const router = useRouter();
-  const postListRef = React.useRef<HTMLDivElement | null>(null);
+  const postListRef = React.useRef<HTMLDivElement>(null);
   const [page, setPage] = React.useState(0);
   const [selectedTags, setSelectedTags] = React.useState<Record<string, boolean>>({});
   const { allBlogPosts, tagInfo: rawTagInfo } = props;
diff --git a/docs/pages/experiments/joy/style-guide.tsx b/docs/pages/experiments/joy/style-guide.tsx
index 51c136036411c7..0f6603a8abeff6 100644
--- a/docs/pages/experiments/joy/style-guide.tsx
+++ b/docs/pages/experiments/joy/style-guide.tsx
@@ -62,7 +62,7 @@ function ColorSchemePicker() {
 
 function ColorToken({ name, value }: { name: string; value: string }) {
   const [color, setColor] = React.useState('');
-  const ref = React.useRef<HTMLDivElement | null>(null);
+  const ref = React.useRef<HTMLDivElement>(null);
   React.useEffect(() => {
     if (ref.current && typeof window !== 'undefined') {
       const style = window.getComputedStyle(ref.current);
diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx
index 778f20e6f207f9..16ba5aa2759a7c 100644
--- a/docs/src/components/header/HeaderNavBar.tsx
+++ b/docs/src/components/header/HeaderNavBar.tsx
@@ -137,8 +137,8 @@ const ProductSubMenu = React.forwardRef<HTMLAnchorElement, ProductSubMenuProps>(
 export default function HeaderNavBar() {
   const [subMenuOpen, setSubMenuOpen] = React.useState<null | 'products' | 'docs'>(null);
   const [subMenuIndex, setSubMenuIndex] = React.useState<number | null>(null);
-  const navRef = React.useRef<HTMLUListElement | null>(null);
-  const productSelectorRef = React.useRef<HTMLDivElement | null>(null);
+  const navRef = React.useRef<HTMLUListElement>(null);
+  const productSelectorRef = React.useRef<HTMLDivElement>(null);
   const productsMenuRef = React.useRef<HTMLButtonElement>(null);
   const docsMenuRef = React.useRef<HTMLButtonElement>(null);
 
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 5afc2add270c1b..c7789a0572181c 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -1284,7 +1284,7 @@ export default function PricingTable({
     }
   }, [router.query]);
 
-  const tableRef = React.useRef<HTMLDivElement | null>(null);
+  const tableRef = React.useRef<HTMLDivElement>(null);
   const gridSx = {
     display: 'grid',
     gridTemplateColumns: `minmax(160px, 1fr) repeat(${plans.length}, minmax(${
diff --git a/docs/src/components/productBaseUI/BaseUICustomization.tsx b/docs/src/components/productBaseUI/BaseUICustomization.tsx
index 322d57b7f68f80..b1263233e99c6f 100644
--- a/docs/src/components/productBaseUI/BaseUICustomization.tsx
+++ b/docs/src/components/productBaseUI/BaseUICustomization.tsx
@@ -219,7 +219,7 @@ function SwitchFromHook(props: UseSwitchParameters) {
 
 export default function BaseUICustomization() {
   const [index, setIndex] = React.useState(0);
-  const infoRef = React.useRef<HTMLDivElement | null>(null);
+  const infoRef = React.useRef<HTMLDivElement>(null);
   function getSelectedProps(i: number) {
     return {
       selected: index === i,
diff --git a/docs/src/components/productMaterial/MaterialStyling.tsx b/docs/src/components/productMaterial/MaterialStyling.tsx
index 1e3097b9b34afd..2cf91516e1da3a 100644
--- a/docs/src/components/productMaterial/MaterialStyling.tsx
+++ b/docs/src/components/productMaterial/MaterialStyling.tsx
@@ -66,9 +66,9 @@ const scrollTo = [27, 10, 4];
 
 export default function MaterialStyling() {
   const [index, setIndex] = React.useState(0);
-  const objectRef = React.useRef<HTMLDivElement | null>(null);
+  const objectRef = React.useRef<HTMLDivElement>(null);
   const { dragging, getDragHandlers } = useResizeHandle(objectRef, { minWidth: '253px' });
-  const infoRef = React.useRef<HTMLDivElement | null>(null);
+  const infoRef = React.useRef<HTMLDivElement>(null);
 
   const getSelectedProps = (i: number) => ({
     selected: index === i,
diff --git a/docs/src/modules/components/JoyThemeBuilder.tsx b/docs/src/modules/components/JoyThemeBuilder.tsx
index 67753753411c4b..a4fc588f4cc30e 100644
--- a/docs/src/modules/components/JoyThemeBuilder.tsx
+++ b/docs/src/modules/components/JoyThemeBuilder.tsx
@@ -714,8 +714,8 @@ function PaletteImport({
 
 function ColorTokenCreator({ onChange }: { onChange: (name: string, value: string) => void }) {
   const [open, setOpen] = React.useState(false);
-  const nameRef = React.useRef<HTMLInputElement | null>(null);
-  const colorRef = React.useRef<HTMLInputElement | null>(null);
+  const nameRef = React.useRef<HTMLInputElement>(null);
+  const colorRef = React.useRef<HTMLInputElement>(null);
   const [name, setName] = React.useState('');
   const [color, setColor] = React.useState('');
   if (!open) {
@@ -876,7 +876,7 @@ function GlobalVariantTokenCreator({
   const [open, setOpen] = React.useState(false);
   const [name, setName] = React.useState('');
   const [color, setColor] = React.useState('');
-  const inputRef = React.useRef<HTMLInputElement | null>(null);
+  const inputRef = React.useRef<HTMLInputElement>(null);
   if (!open) {
     return (
       <Button
diff --git a/packages/mui-base/CONTRIBUTING.md b/packages/mui-base/CONTRIBUTING.md
index 36cdb8a653f422..0904eca96ff1ae 100644
--- a/packages/mui-base/CONTRIBUTING.md
+++ b/packages/mui-base/CONTRIBUTING.md
@@ -137,7 +137,7 @@ interface AwesomeControlHookParameters {
 
 const useAwesomeControlHook = (parameters: AwesomeControlHookParameters) {
   const { rootRef: externalRef } = parameters;
-  const innerRef = React.useRef<HTMLDivElement | null>(null);
+  const innerRef = React.useRef<HTMLDivElement>(null);
 
   const handleRef = useForkRef(externalRef, innerRef);
 
diff --git a/packages/mui-base/src/Button/Button.tsx b/packages/mui-base/src/Button/Button.tsx
index ce9dd0ce7fa9cb..9a5d4f7c55bddd 100644
--- a/packages/mui-base/src/Button/Button.tsx
+++ b/packages/mui-base/src/Button/Button.tsx
@@ -46,7 +46,7 @@ const Button = React.forwardRef(function Button<RootComponentType extends React.
     ...other
   } = props;
 
-  const buttonRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement | null>(null);
+  const buttonRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement>(null);
 
   let rootElementName = rootElementNameProp;
 
diff --git a/packages/mui-base/src/FocusTrap/FocusTrap.tsx b/packages/mui-base/src/FocusTrap/FocusTrap.tsx
index 70fed1b257a706..278c7f0386bb59 100644
--- a/packages/mui-base/src/FocusTrap/FocusTrap.tsx
+++ b/packages/mui-base/src/FocusTrap/FocusTrap.tsx
@@ -146,15 +146,15 @@ function FocusTrap(props: FocusTrapProps): React.JSX.Element {
   const ignoreNextEnforceFocus = React.useRef(false);
   const sentinelStart = React.useRef<HTMLDivElement>(null);
   const sentinelEnd = React.useRef<HTMLDivElement>(null);
-  const nodeToRestore = React.useRef<EventTarget | null>(null);
-  const reactFocusEventTarget = React.useRef<EventTarget | null>(null);
+  const nodeToRestore = React.useRef<EventTarget>(null);
+  const reactFocusEventTarget = React.useRef<EventTarget>(null);
   // This variable is useful when disableAutoFocus is true.
   // It waits for the active element to move into the component to activate.
   const activated = React.useRef(false);
 
   const rootRef = React.useRef<HTMLElement>(null);
   const handleRef = useForkRef(getReactElementRef(children), rootRef);
-  const lastKeydown = React.useRef<KeyboardEvent | null>(null);
+  const lastKeydown = React.useRef<KeyboardEvent>(null);
 
   React.useEffect(() => {
     // We might render an empty child.
diff --git a/packages/mui-base/src/Tab/Tab.tsx b/packages/mui-base/src/Tab/Tab.tsx
index 6147ba91e90ed3..2e85b0e575d298 100644
--- a/packages/mui-base/src/Tab/Tab.tsx
+++ b/packages/mui-base/src/Tab/Tab.tsx
@@ -45,7 +45,7 @@ const Tab = React.forwardRef(function Tab<RootComponentType extends React.Elemen
     ...other
   } = props;
 
-  const tabRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement | null>(null);
+  const tabRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement>(null);
   const handleRef = useForkRef(tabRef, forwardedRef);
 
   const { active, highlighted, selected, getRootProps } = useTab({
diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
index 23799d01516409..7f0a3aaad099cc 100644
--- a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
+++ b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
@@ -65,7 +65,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(
   const { current: isControlled } = React.useRef(value != null);
   const inputRef = React.useRef<HTMLTextAreaElement>(null);
   const handleRef = useForkRef(forwardedRef, inputRef);
-  const heightRef = React.useRef<number | null>(null);
+  const heightRef = React.useRef<number>(null);
   const shadowRef = React.useRef<HTMLTextAreaElement>(null);
 
   const calculateTextareaStyles = React.useCallback(() => {
diff --git a/packages/mui-base/src/unstable_useModal/useModal.ts b/packages/mui-base/src/unstable_useModal/useModal.ts
index ff025dd334e4cc..0b7c8b6462a924 100644
--- a/packages/mui-base/src/unstable_useModal/useModal.ts
+++ b/packages/mui-base/src/unstable_useModal/useModal.ts
@@ -54,7 +54,7 @@ export function useModal(parameters: UseModalParameters): UseModalReturnValue {
 
   // @ts-ignore internal logic
   const modal = React.useRef<{ modalRef: HTMLDivElement; mount: HTMLElement }>({});
-  const mountNodeRef = React.useRef<HTMLElement | null>(null);
+  const mountNodeRef = React.useRef<HTMLElement>(null);
   const modalRef = React.useRef<HTMLDivElement>(null);
   const handleRef = useForkRef(modalRef, rootRef);
   const [exited, setExited] = React.useState(!open);
diff --git a/packages/mui-base/src/useButton/useButton.ts b/packages/mui-base/src/useButton/useButton.ts
index 03f9f3d968791c..6df416a7b8ee9c 100644
--- a/packages/mui-base/src/useButton/useButton.ts
+++ b/packages/mui-base/src/useButton/useButton.ts
@@ -34,7 +34,7 @@ export function useButton(parameters: UseButtonParameters = {}): UseButtonReturn
     type,
     rootElementName: rootElementNameProp,
   } = parameters;
-  const buttonRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement | null>(null);
+  const buttonRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement>(null);
 
   const [active, setActive] = React.useState<boolean>(false);
 
diff --git a/packages/mui-base/src/useDropdown/useDropdown.ts b/packages/mui-base/src/useDropdown/useDropdown.ts
index f6b1fc1be5e11c..064b97bbb97268 100644
--- a/packages/mui-base/src/useDropdown/useDropdown.ts
+++ b/packages/mui-base/src/useDropdown/useDropdown.ts
@@ -20,7 +20,7 @@ export function useDropdown(parameters: UseDropdownParameters = {}) {
   const { defaultOpen, onOpenChange, open: openProp, componentName = 'useDropdown' } = parameters;
   const [popupId, setPopupId] = React.useState<string>('');
   const [triggerElement, setTriggerElement] = React.useState<HTMLElement | null>(null);
-  const lastActionType = React.useRef<string | null>(null);
+  const lastActionType = React.useRef<string>(null);
 
   const handleStateChange: StateChangeCallback<DropdownState> = React.useCallback(
     (event, field, value, reason) => {
diff --git a/packages/mui-base/src/useSlider/useSlider.ts b/packages/mui-base/src/useSlider/useSlider.ts
index ba42bf40568592..cdd753e765c644 100644
--- a/packages/mui-base/src/useSlider/useSlider.ts
+++ b/packages/mui-base/src/useSlider/useSlider.ts
@@ -218,7 +218,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
     value: valueProp,
   } = parameters;
 
-  const touchId = React.useRef<number | undefined>(undefined);
+  const touchId = React.useRef<number>(undefined);
   // We can't use the :active browser pseudo-classes.
   // - The active state isn't triggered when clicking on the rail.
   // - The active state isn't transferred when inversing a range slider.
@@ -267,7 +267,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
 
   const [focusedThumbIndex, setFocusedThumbIndex] = React.useState(-1);
 
-  const sliderRef = React.useRef<HTMLSpanElement | null>(null);
+  const sliderRef = React.useRef<HTMLSpanElement>(null);
   const handleRef = useForkRef(ref, sliderRef);
 
   const createHandleHiddenInputFocus =
@@ -396,7 +396,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
       changeValue(event, event.target.valueAsNumber);
     };
 
-  const previousIndex = React.useRef<number | undefined>(undefined);
+  const previousIndex = React.useRef<number>(undefined);
   let axis = orientation;
   if (isRtl && orientation === 'horizontal') {
     axis += '-reverse';
diff --git a/packages/mui-base/src/useSwitch/useSwitch.ts b/packages/mui-base/src/useSwitch/useSwitch.ts
index 65b3ceaf88991f..81093b3b476d2b 100644
--- a/packages/mui-base/src/useSwitch/useSwitch.ts
+++ b/packages/mui-base/src/useSwitch/useSwitch.ts
@@ -56,7 +56,7 @@ export function useSwitch(props: UseSwitchParameters): UseSwitchReturnValue {
     setFocusVisible(false);
   }
 
-  const inputRef = React.useRef<HTMLInputElement | null>(null);
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
   const createHandleFocus =
     (otherProps: React.InputHTMLAttributes<HTMLInputElement>) =>
diff --git a/packages/mui-base/src/utils/useControllableReducer.ts b/packages/mui-base/src/utils/useControllableReducer.ts
index 544a46e84a066e..d0e651f1d2d198 100644
--- a/packages/mui-base/src/utils/useControllableReducer.ts
+++ b/packages/mui-base/src/utils/useControllableReducer.ts
@@ -145,7 +145,7 @@ export function useControllableReducer<
 >(
   parameters: ControllableReducerParameters<State, Action, ActionContext>,
 ): [State, (action: Action) => void] {
-  const lastActionRef = React.useRef<Action | null>(null);
+  const lastActionRef = React.useRef<Action>(null);
 
   const {
     reducer,
diff --git a/packages/mui-base/src/utils/useMessageBus.ts b/packages/mui-base/src/utils/useMessageBus.ts
index 4cfab271580c1f..b5a3babdfce635 100644
--- a/packages/mui-base/src/utils/useMessageBus.ts
+++ b/packages/mui-base/src/utils/useMessageBus.ts
@@ -40,7 +40,7 @@ export function createMessageBus(): MessageBus {
  * @ignore - internal hook.
  */
 export function useMessageBus() {
-  const bus = React.useRef<MessageBus | undefined>(undefined);
+  const bus = React.useRef<MessageBus>(undefined);
   if (!bus.current) {
     bus.current = createMessageBus();
   }
diff --git a/packages/mui-docs/src/Ad/Ad.tsx b/packages/mui-docs/src/Ad/Ad.tsx
index 53e04e73840bbb..3fca612a0b5668 100644
--- a/packages/mui-docs/src/Ad/Ad.tsx
+++ b/packages/mui-docs/src/Ad/Ad.tsx
@@ -146,7 +146,7 @@ export function Ad() {
   const ad = React.useContext(AdContext);
   const eventLabel = label ? `${label}-${ad.placement}-${adShape}` : null;
 
-  const timerAdblock = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const timerAdblock = React.useRef<ReturnType<typeof setTimeout>>(undefined);
 
   const checkAdblock = React.useCallback(
     (attempt = 1) => {
diff --git a/packages/mui-docs/src/CodeCopy/CodeCopy.tsx b/packages/mui-docs/src/CodeCopy/CodeCopy.tsx
index e0d3cdf971e77c..7ef5bdcde9c60d 100644
--- a/packages/mui-docs/src/CodeCopy/CodeCopy.tsx
+++ b/packages/mui-docs/src/CodeCopy/CodeCopy.tsx
@@ -157,7 +157,7 @@ interface CodeCopyProviderProps {
  * Any code block inside the tree can set the rootNode when mouse enter to leverage keyboard copy.
  */
 export function CodeCopyProvider({ children }: CodeCopyProviderProps) {
-  const rootNode = React.useRef<HTMLDivElement | null>(null);
+  const rootNode = React.useRef<HTMLDivElement>(null);
   React.useEffect(() => {
     document.addEventListener('keydown', (event) => {
       if (!rootNode.current) {
diff --git a/packages/mui-docs/src/CodeCopy/useClipboardCopy.ts b/packages/mui-docs/src/CodeCopy/useClipboardCopy.ts
index 9a280651553303..afc1f8f9eea114 100644
--- a/packages/mui-docs/src/CodeCopy/useClipboardCopy.ts
+++ b/packages/mui-docs/src/CodeCopy/useClipboardCopy.ts
@@ -3,7 +3,7 @@ import clipboardCopy from 'clipboard-copy';
 
 export default function useClipboardCopy() {
   const [isCopied, setIsCopied] = React.useState(false);
-  const timeout = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const timeout = React.useRef<ReturnType<typeof setTimeout>>(undefined);
 
   React.useEffect(
     () => () => {
diff --git a/packages/mui-joy/src/Tab/Tab.tsx b/packages/mui-joy/src/Tab/Tab.tsx
index b8b84b45e3c5dc..aad9b4e91d4940 100644
--- a/packages/mui-joy/src/Tab/Tab.tsx
+++ b/packages/mui-joy/src/Tab/Tab.tsx
@@ -150,7 +150,7 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
     ...other
   } = props;
 
-  const tabRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement | null>(null);
+  const tabRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement>(null);
   const handleRef = useForkRef(tabRef, ref) as React.RefCallback<Element>;
 
   const { active, focusVisible, setFocusVisible, selected, getRootProps } = useTab({
diff --git a/packages/mui-joy/src/Tooltip/Tooltip.tsx b/packages/mui-joy/src/Tooltip/Tooltip.tsx
index 6e7108824554a4..73281505c26559 100644
--- a/packages/mui-joy/src/Tooltip/Tooltip.tsx
+++ b/packages/mui-joy/src/Tooltip/Tooltip.tsx
@@ -262,7 +262,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
 
   const id = useId(idProp);
 
-  const prevUserSelect = React.useRef<string | undefined>(undefined);
+  const prevUserSelect = React.useRef<string>(undefined);
   const stopTouchInteraction = useEventCallback(() => {
     if (prevUserSelect.current !== undefined) {
       // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- WebkitUserSelect is required outside the component
diff --git a/packages/mui-material/src/Modal/useModal.ts b/packages/mui-material/src/Modal/useModal.ts
index 6a14ec7b7eb9c7..7b4d7305f28476 100644
--- a/packages/mui-material/src/Modal/useModal.ts
+++ b/packages/mui-material/src/Modal/useModal.ts
@@ -55,7 +55,7 @@ function useModal(parameters: UseModalParameters): UseModalReturnValue {
 
   // @ts-ignore internal logic
   const modal = React.useRef<{ modalRef: HTMLDivElement; mount: HTMLElement }>({});
-  const mountNodeRef = React.useRef<HTMLElement | null>(null);
+  const mountNodeRef = React.useRef<HTMLElement>(null);
   const modalRef = React.useRef<HTMLDivElement>(null);
   const handleRef = useForkRef(modalRef, rootRef);
   const [exited, setExited] = React.useState(!open);
diff --git a/packages/mui-material/src/Popper/BasePopper.tsx b/packages/mui-material/src/Popper/BasePopper.tsx
index 12b3ec436af335..2eb85f89653f25 100644
--- a/packages/mui-material/src/Popper/BasePopper.tsx
+++ b/packages/mui-material/src/Popper/BasePopper.tsx
@@ -101,7 +101,7 @@ const PopperTooltip = React.forwardRef<HTMLDivElement, PopperTooltipProps>(funct
   const tooltipRef = React.useRef<HTMLElement>(null);
   const ownRef = useForkRef(tooltipRef, forwardedRef);
 
-  const popperRef = React.useRef<Instance | null>(null);
+  const popperRef = React.useRef<Instance>(null);
   const handlePopperRef = useForkRef(popperRef, popperRefProp);
   const handlePopperRefRef = React.useRef(handlePopperRef);
   useEnhancedEffect(() => {
diff --git a/packages/mui-material/src/Popper/Popper.spec.tsx b/packages/mui-material/src/Popper/Popper.spec.tsx
index 94a4cad381add3..ef4d76146d3616 100644
--- a/packages/mui-material/src/Popper/Popper.spec.tsx
+++ b/packages/mui-material/src/Popper/Popper.spec.tsx
@@ -10,7 +10,7 @@ interface Props {
 export default function ValueLabelComponent(props: Props) {
   const { children, value } = props;
 
-  const popperRef = React.useRef<Instance | null>(null);
+  const popperRef = React.useRef<Instance>(null);
   React.useEffect(() => {
     if (popperRef.current) {
       popperRef.current.update();
diff --git a/packages/mui-material/src/Slider/useSlider.ts b/packages/mui-material/src/Slider/useSlider.ts
index 0cd7ba016c3387..f3ef2bfeeeafc7 100644
--- a/packages/mui-material/src/Slider/useSlider.ts
+++ b/packages/mui-material/src/Slider/useSlider.ts
@@ -220,7 +220,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
     value: valueProp,
   } = parameters;
 
-  const touchId = React.useRef<number | undefined>(undefined);
+  const touchId = React.useRef<number>(undefined);
   // We can't use the :active browser pseudo-classes.
   // - The active state isn't triggered when clicking on the rail.
   // - The active state isn't transferred when inversing a range slider.
@@ -269,7 +269,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
 
   const [focusedThumbIndex, setFocusedThumbIndex] = React.useState(-1);
 
-  const sliderRef = React.useRef<HTMLSpanElement | null>(null);
+  const sliderRef = React.useRef<HTMLSpanElement>(null);
   const handleRef = useForkRef(ref, sliderRef);
 
   const createHandleHiddenInputFocus =
@@ -398,7 +398,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
       changeValue(event, event.target.valueAsNumber);
     };
 
-  const previousIndex = React.useRef<number | undefined>(undefined);
+  const previousIndex = React.useRef<number>(undefined);
   let axis = orientation;
   if (isRtl && orientation === 'horizontal') {
     axis += '-reverse';
diff --git a/packages/mui-material/src/TextareaAutosize/TextareaAutosize.tsx b/packages/mui-material/src/TextareaAutosize/TextareaAutosize.tsx
index 37529fa37873c5..6b420f887cf19c 100644
--- a/packages/mui-material/src/TextareaAutosize/TextareaAutosize.tsx
+++ b/packages/mui-material/src/TextareaAutosize/TextareaAutosize.tsx
@@ -64,7 +64,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(
   const { current: isControlled } = React.useRef(value != null);
   const inputRef = React.useRef<HTMLTextAreaElement>(null);
   const handleRef = useForkRef(forwardedRef, inputRef);
-  const heightRef = React.useRef<number | null>(null);
+  const heightRef = React.useRef<number>(null);
   const shadowRef = React.useRef<HTMLTextAreaElement>(null);
 
   const calculateTextareaStyles = React.useCallback(() => {
diff --git a/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.tsx b/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.tsx
index 398a7b37421019..09be0e52b8c785 100644
--- a/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.tsx
+++ b/packages/mui-material/src/Unstable_TrapFocus/FocusTrap.tsx
@@ -138,15 +138,15 @@ function FocusTrap(props: FocusTrapProps): React.JSX.Element {
   const ignoreNextEnforceFocus = React.useRef(false);
   const sentinelStart = React.useRef<HTMLDivElement>(null);
   const sentinelEnd = React.useRef<HTMLDivElement>(null);
-  const nodeToRestore = React.useRef<EventTarget | null>(null);
-  const reactFocusEventTarget = React.useRef<EventTarget | null>(null);
+  const nodeToRestore = React.useRef<EventTarget>(null);
+  const reactFocusEventTarget = React.useRef<EventTarget>(null);
   // This variable is useful when disableAutoFocus is true.
   // It waits for the active element to move into the component to activate.
   const activated = React.useRef(false);
 
   const rootRef = React.useRef<HTMLElement>(null);
   const handleRef = useForkRef(getReactElementRef(children), rootRef);
-  const lastKeydown = React.useRef<KeyboardEvent | null>(null);
+  const lastKeydown = React.useRef<KeyboardEvent>(null);
 
   React.useEffect(() => {
     // We might render an empty child.
diff --git a/packages/mui-material/test/typescript/index.spec.tsx b/packages/mui-material/test/typescript/index.spec.tsx
index 214d382ad56dd9..21004593f3cafc 100644
--- a/packages/mui-material/test/typescript/index.spec.tsx
+++ b/packages/mui-material/test/typescript/index.spec.tsx
@@ -5,7 +5,7 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 
 function TestStandardPropsCallbackRefUsage() {
-  const contentRef = React.useRef<HTMLDivElement | null>(null);
+  const contentRef = React.useRef<HTMLDivElement>(null);
 
   const setContentRef = React.useCallback((node: HTMLDivElement | null) => {
     contentRef.current = node;
@@ -23,7 +23,7 @@ function TestStandardPropsCallbackRefUsage() {
 }
 
 function TestStandardPropsObjectRefUsage() {
-  const contentRef = React.useRef<HTMLDivElement | null>(null);
+  const contentRef = React.useRef<HTMLDivElement>(null);
 
   return (
     <Dialog open>
diff --git a/packages/mui-utils/src/setRef/setRef.spec.tsx b/packages/mui-utils/src/setRef/setRef.spec.tsx
index a5be046dd0914a..ac94e8095a4ee0 100644
--- a/packages/mui-utils/src/setRef/setRef.spec.tsx
+++ b/packages/mui-utils/src/setRef/setRef.spec.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import setRef from './setRef';
 
 function MyRef() {
-  const ref = React.useRef<HTMLDivElement | null>(null);
+  const ref = React.useRef<HTMLDivElement>(null);
 
   const handleRef = React.useCallback((node: HTMLDivElement) => {
     setRef(ref, node);
diff --git a/test/integration/material-ui/components.spec.tsx b/test/integration/material-ui/components.spec.tsx
index 295bb3046c8efe..805ef12b8fc158 100644
--- a/test/integration/material-ui/components.spec.tsx
+++ b/test/integration/material-ui/components.spec.tsx
@@ -588,7 +588,7 @@ function MenuTest() {
     'Hide sensitive notification content',
     'Hide all notification content',
   ];
-  const buttonActionRef = React.useRef<ButtonBaseActions | null>(null);
+  const buttonActionRef = React.useRef<ButtonBaseActions>(null);
 
   return (
     <Menu