Run useRef codemod

docs/data/joy/components/input/DebouncedInput.tsx

@@ -11,7 +11,7 @@ type DebounceProps = {
 function DebounceInput(props: InputProps & DebounceProps) {
   const { handleDebounce, debounceTimeout, ...rest } = props;
 
-  const timerRef = React.useRef<ReturnType<typeof setTimeout>>();
+  const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     clearTimeout(timerRef.current);

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<undefined | number>();
+  const timer = React.useRef<undefined | number>(undefined);
   const countdown = () => {
     timer.current = window.setInterval(() => {
       setLeft((prev) => (prev === undefined ? prev : Math.max(0, prev - 100)));

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>>();
+  const timer = React.useRef<ReturnType<typeof setTimeout>>(undefined);
 
   const buttonSx = {
     ...(success && {

docs/data/material/components/progress/DelayingAppearance.tsx

@@ -8,7 +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>>();
+  const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
 
   React.useEffect(
     () => () => {

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>();
+  const buttonRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement>(undefined);
 
   let rootElementName = rootElementNameProp;
 

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>();
+  const tabRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement>(undefined);
   const handleRef = useForkRef(tabRef, forwardedRef);
 
   const { active, highlighted, selected, getRootProps } = useTab({

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>();
+  const buttonRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement>(undefined);
 
   const [active, setActive] = React.useState<boolean>(false);
 

packages/mui-base/src/useCompound/useCompound.test.tsx

@@ -256,7 +256,7 @@ describe('compound components', () => {
 
       function Child() {
         const ref = React.useRef<HTMLLIElement>(null);
-        const { id } = useCompoundItem<string, { ref: React.RefObject<HTMLLIElement> }>(
+        const { id } = useCompoundItem<string, { ref: React.RefObject<HTMLLIElement | null> }>(
           idGenerator,
           React.useMemo(() => ({ ref }), []),
         );

packages/mui-base/src/useCompound/useCompoundParent.ts

@@ -47,7 +47,10 @@ if (process.env.NODE_ENV !== 'production') {
   CompoundComponentContext.displayName = 'CompoundComponentContext';
 }
 
-export interface UseCompoundParentReturnValue<Key, Subitem extends { ref: React.RefObject<Node> }> {
+export interface UseCompoundParentReturnValue<
+  Key,
+  Subitem extends { ref: React.RefObject<Node | null> },
+> {
   /**
    * The value for the CompoundComponentContext provider.
    */
@@ -63,7 +66,7 @@ export interface UseCompoundParentReturnValue<Key, Subitem extends { ref: React.
 /**
  * Sorts the subitems by their position in the DOM.
  */
-function sortSubitems<Key, Subitem extends { ref: React.RefObject<Node> }>(
+function sortSubitems<Key, Subitem extends { ref: React.RefObject<Node | null> }>(
   subitems: Map<Key, Subitem>,
 ) {
   const subitemsArray = Array.from(subitems.keys()).map((key) => {
@@ -100,7 +103,7 @@ function sortSubitems<Key, Subitem extends { ref: React.RefObject<Node> }>(
  */
 export function useCompoundParent<
   Key,
-  Subitem extends { ref: React.RefObject<Node> },
+  Subitem extends { ref: React.RefObject<Node | null> },
 >(): UseCompoundParentReturnValue<Key, Subitem> {
   const [subitems, setSubitems] = React.useState(new Map<Key, Subitem>());
   const subitemKeys = React.useRef(new Set<Key>());

packages/mui-base/src/useMenu/menuReducer.ts

@@ -3,7 +3,7 @@ import { ActionWithContext } from '../utils/useControllableReducer.types';
 import { MenuInternalState } from './useMenu.types';
 
 export type MenuActionContext = ListActionContext<string> & {
-  listboxRef: React.RefObject<HTMLElement>;
+  listboxRef: React.RefObject<HTMLElement | null>;
 };
 
 export function menuReducer(

packages/mui-base/src/useMenuItem/useMenuItem.types.ts

@@ -11,7 +11,7 @@ export interface MenuItemMetadata {
   id: string;
   disabled: boolean;
   label?: string;
-  ref: React.RefObject<HTMLElement>;
+  ref: React.RefObject<HTMLElement | null>;
 }
 
 export type UseMenuItemRootSlotProps<ExternalProps = {}> = ExternalProps &

packages/mui-base/src/useOption/useOption.types.ts

@@ -4,7 +4,7 @@ export interface SelectOption<Value> {
   value: Value;
   label: React.ReactNode;
   disabled?: boolean;
-  ref: React.RefObject<HTMLElement>;
+  ref: React.RefObject<HTMLElement | null>;
   id?: string;
 }
 

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>();
+  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>();
+  const sliderRef = React.useRef<HTMLSpanElement>(undefined);
   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>();
+  const previousIndex = React.useRef<number>(undefined);
   let axis = orientation;
   if (isRtl && orientation === 'horizontal') {
     axis += '-reverse';

packages/mui-base/src/useTabs/useTabs.ts

@@ -8,7 +8,7 @@ import { TabPanelMetadata } from './TabsProvider';
 export interface TabMetadata {
   disabled: boolean;
   id: string | undefined;
-  ref: React.RefObject<HTMLElement>;
+  ref: React.RefObject<HTMLElement | null>;
 }
 
 type IdLookupFunction = (id: string | number) => string | undefined;

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>();
+  const bus = React.useRef<MessageBus>(undefined);
   if (!bus.current) {
     bus.current = createMessageBus();
   }

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>>();
+  const timeout = React.useRef<ReturnType<typeof setTimeout>>(undefined);
 
   React.useEffect(
     () => () => {

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>();
+  const tabRef = React.useRef<HTMLButtonElement | HTMLAnchorElement | HTMLElement>(undefined);
   const handleRef = useForkRef(tabRef, ref) as React.RefCallback<Element>;
 
   const { active, focusVisible, setFocusVisible, selected, getRootProps } = useTab({

packages/mui-joy/src/Tooltip/Tooltip.tsx

@@ -261,7 +261,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
 
   const id = useId(idProp);
 
-  const prevUserSelect: React.MutableRefObject<string | undefined> = React.useRef();
+  const prevUserSelect: React.MutableRefObject<string | undefined> = React.useRef(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

packages/mui-material/src/ButtonBase/ButtonBase.test.js

@@ -1173,7 +1173,7 @@ describe('<ButtonBase />', () => {
 
     it('should be able to focus visible the button', () => {
       /**
-       * @type {React.RefObject<import('./ButtonBase').ButtonBaseActions>}
+       * @type {React.RefObject<import('./ButtonBase').ButtonBaseActions  | null>}
        */
       const buttonActionsRef = React.createRef();
       const { getByText } = render(

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>();
+  const ref = React.useRef<HTMLDivElement>(undefined);
 
   const handleRef = React.useCallback((node: HTMLDivElement) => {
     setRef(ref, node);