[core] React 19 useRef cleanup (#44704)

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);
 

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);

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

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)));

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();

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) {

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 && {

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(
     () => () => {

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;

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);

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);
 

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(${

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,

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,

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

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);
 

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;
 

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.

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({

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(() => {

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);

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);
 

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) => {

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';

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>) =>

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,

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();
   }

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) => {

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) {

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(
     () => () => {

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({

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

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);

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(() => {

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();

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';

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(() => {