[internal] Performance: useEffect optimization & fast hooks

packages/react/src/accordion/item/AccordionItem.tsx

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { useStableCallback } from '@base-ui-components/utils/useStableCallback';
 import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs';
+import { useState } from '@base-ui-components/utils/useState';
 import { BaseUIComponentProps } from '../../utils/types';
 import { useBaseUiId } from '../../utils/useBaseUiId';
 import { useCollapsibleRoot } from '../../collapsible/root/useCollapsibleRoot';
@@ -112,7 +113,7 @@ export const AccordionItem = React.forwardRef(function AccordionItem(
     [disabled, index, isOpen, rootState],
   );
 
-  const [triggerId, setTriggerId] = React.useState<string | undefined>(useBaseUiId());
+  const [triggerId, setTriggerId] = useState<string | undefined>(useBaseUiId());
 
   const accordionItemContext: AccordionItemContext = React.useMemo(
     () => ({

packages/react/src/accordion/root/AccordionRoot.tsx

@@ -4,6 +4,7 @@ import { useControlled } from '@base-ui-components/utils/useControlled';
 import { useStableCallback } from '@base-ui-components/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
 import { warn } from '@base-ui-components/utils/warn';
+import { useRef } from '@base-ui-components/utils/useRef';
 import { BaseUIComponentProps, Orientation } from '../../utils/types';
 import { CompositeList } from '../../composite/list/CompositeList';
 import { useDirection } from '../../direction-provider/DirectionContext';
@@ -69,7 +70,7 @@ export const AccordionRoot = React.forwardRef(function AccordionRoot(
 
   const onValueChange = useStableCallback(onValueChangeProp);
 
-  const accordionItemRefs = React.useRef<(HTMLElement | null)[]>([]);
+  const accordionItemRefs = useRef<(HTMLElement | null)[]>([]);
 
   const [value, setValue] = useControlled({
     controlled: valueProp,

packages/react/src/autocomplete/root/AutocompleteRoot.spec.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useState } from '@base-ui-components/utils/useState';
 import { Autocomplete } from '@base-ui-components/react/autocomplete';
 
 const objectItems = [
@@ -105,7 +106,7 @@ const groupItemsReadonly = [
 />;
 
 function App2() {
-  const [value, setValue] = React.useState('a');
+  const [value, setValue] = useState('a');
   return (
     <Autocomplete.Root
       value={value}

packages/react/src/autocomplete/root/AutocompleteRoot.tsx

@@ -1,6 +1,8 @@
 'use client';
 import * as React from 'react';
 import { useStableCallback } from '@base-ui-components/utils/useStableCallback';
+import { useEffect } from '@base-ui-components/utils/useEffect';
+import { useState } from '@base-ui-components/utils/useState';
 import { AriaCombobox } from '../../combobox/root/AriaCombobox';
 import { useCoreFilter } from '../../combobox/root/utils/useFilter';
 import { stringifyAsLabel } from '../../utils/resolveValueLabel';
@@ -49,10 +51,10 @@ export function AutocompleteRoot<ItemValue>(
   // Mirror the typed value for uncontrolled usage so we can compose the temporary
   // inline input value.
   const isControlled = value !== undefined;
-  const [internalValue, setInternalValue] = React.useState(defaultValue ?? '');
-  const [inlineInputValue, setInlineInputValue] = React.useState('');
+  const [internalValue, setInternalValue] = useState(defaultValue ?? '');
+  const [inlineInputValue, setInlineInputValue] = useState('');
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isControlled) {
       setInlineInputValue('');
     }

packages/react/src/avatar/fallback/AvatarFallback.tsx

@@ -1,6 +1,8 @@
 'use client';
 import * as React from 'react';
 import { useTimeout } from '@base-ui-components/utils/useTimeout';
+import { useEffect } from '@base-ui-components/utils/useEffect';
+import { useState } from '@base-ui-components/utils/useState';
 import { BaseUIComponentProps } from '../../utils/types';
 import { useRenderElement } from '../../utils/useRenderElement';
 import { useAvatarRootContext } from '../root/AvatarRootContext';
@@ -20,10 +22,10 @@ export const AvatarFallback = React.forwardRef(function AvatarFallback(
   const { className, render, delay, ...elementProps } = componentProps;
 
   const { imageLoadingStatus } = useAvatarRootContext();
-  const [delayPassed, setDelayPassed] = React.useState(delay === undefined);
+  const [delayPassed, setDelayPassed] = useState(delay === undefined);
   const timeout = useTimeout();
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (delay !== undefined) {
       timeout.start(delay, () => setDelayPassed(true));
     }

packages/react/src/avatar/image/useImageLoadingStatus.ts

@@ -1,6 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
+import { useState } from '@base-ui-components/utils/useState';
 import { NOOP } from '../../utils/noop';
 
 export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
@@ -14,7 +15,7 @@ export function useImageLoadingStatus(
   src: string | undefined,
   { referrerPolicy, crossOrigin }: UseImageLoadingStatusOptions,
 ): ImageLoadingStatus {
-  const [loadingStatus, setLoadingStatus] = React.useState<ImageLoadingStatus>('idle');
+  const [loadingStatus, setLoadingStatus] = useState<ImageLoadingStatus>('idle');
 
   useIsoLayoutEffect(() => {
     if (!src) {

packages/react/src/avatar/root/AvatarRoot.tsx

@@ -1,5 +1,6 @@
 'use client';
 import * as React from 'react';
+import { useState } from '@base-ui-components/utils/useState';
 import { BaseUIComponentProps } from '../../utils/types';
 import { useRenderElement } from '../../utils/useRenderElement';
 import { AvatarRootContext } from './AvatarRootContext';
@@ -17,7 +18,7 @@ export const AvatarRoot = React.forwardRef(function AvatarRoot(
 ) {
   const { className, render, ...elementProps } = componentProps;
 
-  const [imageLoadingStatus, setImageLoadingStatus] = React.useState<ImageLoadingStatus>('idle');
+  const [imageLoadingStatus, setImageLoadingStatus] = useState<ImageLoadingStatus>('idle');
 
   const state: AvatarRoot.State = React.useMemo(
     () => ({

packages/react/src/checkbox-group/CheckboxGroup.tsx

@@ -2,6 +2,8 @@
 import * as React from 'react';
 import { useControlled } from '@base-ui-components/utils/useControlled';
 import { useStableCallback } from '@base-ui-components/utils/useStableCallback';
+import { useRef } from '@base-ui-components/utils/useRef';
+import { useCallback } from '@base-ui-components/utils/useCallback';
 import { useBaseUiId } from '../utils/useBaseUiId';
 import { useRenderElement } from '../utils/useRenderElement';
 import { CheckboxGroupContext } from './CheckboxGroupContext';
@@ -83,9 +85,9 @@ export const CheckboxGroup = React.forwardRef(function CheckboxGroup(
 
   const id = useBaseUiId(idProp);
 
-  const controlRef = React.useRef<HTMLButtonElement>(null);
+  const controlRef = useRef<HTMLButtonElement>(null);
 
-  const registerControlRef = React.useCallback((element: HTMLButtonElement | null) => {
+  const registerControlRef = useCallback((element: HTMLButtonElement | null) => {
     if (controlRef.current == null && element != null && !element.hasAttribute(PARENT_CHECKBOX)) {
       controlRef.current = element;
     }

packages/react/src/checkbox-group/useCheckboxGroupParent.ts

@@ -1,6 +1,9 @@
 'use client';
 import * as React from 'react';
 import { useStableCallback } from '@base-ui-components/utils/useStableCallback';
+import { useRef } from '@base-ui-components/utils/useRef';
+import { useCallback } from '@base-ui-components/utils/useCallback';
+import { useState } from '@base-ui-components/utils/useState';
 import { useBaseUiId } from '../utils/useBaseUiId';
 import type { BaseUIChangeEventDetails } from '../utils/createBaseUIEventDetails';
 import type { BaseUIEventReasons } from '../utils/reasons';
@@ -12,18 +15,18 @@ export function useCheckboxGroupParent(
 ): useCheckboxGroupParent.ReturnValue {
   const { allValues = EMPTY, value = EMPTY, onValueChange: onValueChangeProp } = params;
 
-  const uncontrolledStateRef = React.useRef(value);
-  const disabledStatesRef = React.useRef(new Map<string, boolean>());
+  const uncontrolledStateRef = useRef(value);
+  const disabledStatesRef = useRef(new Map<string, boolean>());
 
-  const [status, setStatus] = React.useState<'on' | 'off' | 'mixed'>('mixed');
+  const [status, setStatus] = useState<'on' | 'off' | 'mixed'>('mixed');
 
   const id = useBaseUiId();
   const checked = value.length === allValues.length;
   const indeterminate = value.length !== allValues.length && value.length > 0;
 
   const onValueChange = useStableCallback(onValueChangeProp);
 
-  const getParentProps: useCheckboxGroupParent.ReturnValue['getParentProps'] = React.useCallback(
+  const getParentProps: useCheckboxGroupParent.ReturnValue['getParentProps'] = useCallback(
     () => ({
       id,
       indeterminate,
@@ -74,7 +77,7 @@ export function useCheckboxGroupParent(
     [allValues, checked, id, indeterminate, onValueChange, status, value.length],
   );
 
-  const getChildProps: useCheckboxGroupParent.ReturnValue['getChildProps'] = React.useCallback(
+  const getChildProps: useCheckboxGroupParent.ReturnValue['getChildProps'] = useCallback(
     (childValue: string) => ({
       checked: value.includes(childValue),
       onCheckedChange(nextChecked, eventDetails) {

packages/react/src/checkbox/indicator/CheckboxIndicator.tsx

@@ -1,5 +1,6 @@
 'use client';
 import * as React from 'react';
+import { useRef } from '@base-ui-components/utils/useRef';
 import { useCheckboxRootContext } from '../root/CheckboxRootContext';
 import { useRenderElement } from '../../utils/useRenderElement';
 import { useStateAttributesMapping } from '../utils/useStateAttributesMapping';
@@ -29,7 +30,7 @@ export const CheckboxIndicator = React.forwardRef(function CheckboxIndicator(
 
   const { transitionStatus, setMounted } = useTransitionStatus(rendered);
 
-  const indicatorRef = React.useRef<HTMLSpanElement | null>(null);
+  const indicatorRef = useRef<HTMLSpanElement | null>(null);
 
   const state: CheckboxIndicator.State = React.useMemo(
     () => ({

packages/react/src/checkbox/root/CheckboxRoot.tsx

@@ -6,6 +6,8 @@ import { useStableCallback } from '@base-ui-components/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
 import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs';
 import { visuallyHidden } from '@base-ui-components/utils/visuallyHidden';
+import { useEffect } from '@base-ui-components/utils/useEffect';
+import { useRef } from '@base-ui-components/utils/useRef';
 import { NOOP } from '../../utils/noop';
 import { useStateAttributesMapping } from '../utils/useStateAttributesMapping';
 import { useRenderElement } from '../../utils/useRenderElement';
@@ -117,7 +119,7 @@ export const CheckboxRoot = React.forwardRef(function CheckboxRoot(
   const setGroupValue = groupContext?.setValue;
   const defaultGroupValue = groupContext?.defaultValue;
 
-  const controlRef = React.useRef<HTMLButtonElement>(null);
+  const controlRef = useRef<HTMLButtonElement>(null);
 
   const { getButtonProps, buttonRef } = useButton({
     disabled,
@@ -157,7 +159,7 @@ export const CheckboxRoot = React.forwardRef(function CheckboxRoot(
     getValue: () => checked,
   });
 
-  const inputRef = React.useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
   const mergedInputRef = useMergedRefs(inputRefProp, inputRef, validation.inputRef);
 
   useIsoLayoutEffect(() => {
@@ -243,7 +245,7 @@ export const CheckboxRoot = React.forwardRef(function CheckboxRoot(
     ? groupIndeterminate || indeterminate
     : indeterminate;
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (parentContext && value) {
       parentContext.disabledStatesRef.current.set(value, disabled);
     }

packages/react/src/collapsible/panel/useCollapsiblePanel.ts

@@ -6,6 +6,8 @@ import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs';
 import { useOnMount } from '@base-ui-components/utils/useOnMount';
 import { AnimationFrame, useAnimationFrame } from '@base-ui-components/utils/useAnimationFrame';
 import { warn } from '@base-ui-components/utils/warn';
+import { useEffect } from '@base-ui-components/utils/useEffect';
+import { useRef } from '@base-ui-components/utils/useRef';
 import { HTMLProps } from '../../utils/types';
 import { createChangeEventDetails } from '../../utils/createBaseUIEventDetails';
 import { REASONS } from '../../utils/reasons';
@@ -39,10 +41,10 @@ export function useCollapsiblePanel(
     width,
   } = parameters;
 
-  const isBeforeMatchRef = React.useRef(false);
-  const latestAnimationNameRef = React.useRef<string>(null);
-  const shouldCancelInitialOpenAnimationRef = React.useRef(open);
-  const shouldCancelInitialOpenTransitionRef = React.useRef(open);
+  const isBeforeMatchRef = useRef(false);
+  const latestAnimationNameRef = useRef<string>(null);
+  const shouldCancelInitialOpenAnimationRef = useRef(open);
+  const shouldCancelInitialOpenTransitionRef = useRef(open);
 
   const endingStyleFrame = useAnimationFrame();
 
@@ -380,7 +382,7 @@ export function useCollapsiblePanel(
     }
   }, [hiddenUntilFound, hidden, animationTypeRef, panelRef]);
 
-  React.useEffect(
+  useEffect(
     function registerBeforeMatchListener() {
       const panel = panelRef.current;
       if (!panel) {

packages/react/src/collapsible/root/useCollapsibleRoot.ts

@@ -3,6 +3,8 @@ import * as React from 'react';
 import { useControlled } from '@base-ui-components/utils/useControlled';
 import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui-components/utils/useStableCallback';
+import { useRef } from '@base-ui-components/utils/useRef';
+import { useState } from '@base-ui-components/utils/useState';
 import { useBaseUiId } from '../../utils/useBaseUiId';
 import { createChangeEventDetails } from '../../utils/createBaseUIEventDetails';
 import { REASONS } from '../../utils/reasons';
@@ -32,23 +34,23 @@ export function useCollapsibleRoot(
   });
 
   const { mounted, setMounted, transitionStatus } = useTransitionStatus(open, true, true);
-  const [visible, setVisible] = React.useState(open);
-  const [{ height, width }, setDimensions] = React.useState<Dimensions>({
+  const [visible, setVisible] = useState(open);
+  const [{ height, width }, setDimensions] = useState<Dimensions>({
     height: undefined,
     width: undefined,
   });
 
   const defaultPanelId = useBaseUiId();
-  const [panelIdState, setPanelIdState] = React.useState<string | undefined>();
+  const [panelIdState, setPanelIdState] = useState<string | undefined>();
   const panelId = panelIdState ?? defaultPanelId;
 
-  const [hiddenUntilFound, setHiddenUntilFound] = React.useState(false);
-  const [keepMounted, setKeepMounted] = React.useState(false);
+  const [hiddenUntilFound, setHiddenUntilFound] = useState(false);
+  const [keepMounted, setKeepMounted] = useState(false);
 
-  const abortControllerRef = React.useRef<AbortController | null>(null);
-  const animationTypeRef = React.useRef<AnimationType>(null);
-  const transitionDimensionRef = React.useRef<'width' | 'height' | null>(null);
-  const panelRef: React.RefObject<HTMLElement | null> = React.useRef(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const animationTypeRef = useRef<AnimationType>(null);
+  const transitionDimensionRef = useRef<'width' | 'height' | null>(null);
+  const panelRef: React.RefObject<HTMLElement | null> = useRef(null);
 
   const runOnceAnimationsFinish = useAnimationsFinished(panelRef, false);
 

packages/react/src/combobox/chips/ComboboxChips.tsx

@@ -1,6 +1,8 @@
 'use client';
 import * as React from 'react';
 import { useStore } from '@base-ui-components/utils/store';
+import { useRef } from '@base-ui-components/utils/useRef';
+import { useState } from '@base-ui-components/utils/useState';
 import { useRenderElement } from '../../utils/useRenderElement';
 import { BaseUIComponentProps } from '../../utils/types';
 import { ComboboxChipsContext } from './ComboboxChipsContext';
@@ -22,15 +24,15 @@ export const ComboboxChips = React.forwardRef(function ComboboxChips(
 
   const open = useStore(store, selectors.open);
 
-  const [highlightedChipIndex, setHighlightedChipIndex] = React.useState<number | undefined>(
+  const [highlightedChipIndex, setHighlightedChipIndex] = useState<number | undefined>(
     undefined,
   );
 
   if (open && highlightedChipIndex !== undefined) {
     setHighlightedChipIndex(undefined);
   }
 
-  const chipsRef = React.useRef<Array<HTMLButtonElement | null>>([]);
+  const chipsRef = useRef<Array<HTMLButtonElement | null>>([]);
 
   const element = useRenderElement('div', componentProps, {
     ref: [forwardedRef, store.state.chipsContainerRef],

packages/react/src/combobox/group/ComboboxGroup.tsx

@@ -1,5 +1,6 @@
 'use client';
 import * as React from 'react';
+import { useState } from '@base-ui-components/utils/useState';
 import { BaseUIComponentProps } from '../../utils/types';
 import { useRenderElement } from '../../utils/useRenderElement';
 import { ComboboxGroupContext } from './ComboboxGroupContext';
@@ -15,7 +16,7 @@ export const ComboboxGroup = React.forwardRef(function ComboboxGroup(
 ) {
   const { render, className, items, ...elementProps } = componentProps;
 
-  const [labelId, setLabelId] = React.useState<string | undefined>();
+  const [labelId, setLabelId] = useState<string | undefined>();
 
   const contextValue = React.useMemo(
     () => ({

packages/react/src/combobox/input/ComboboxInput.tsx

@@ -3,6 +3,8 @@ import * as React from 'react';
 import { useStore } from '@base-ui-components/utils/store';
 import { useStableCallback } from '@base-ui-components/utils/useStableCallback';
 import { isAndroid, isFirefox } from '@base-ui-components/utils/detectBrowser';
+import { useRef } from '@base-ui-components/utils/useRef';
+import { useState } from '@base-ui-components/utils/useState';
 import { BaseUIComponentProps } from '../../utils/types';
 import { useBaseUiId } from '../../utils/useBaseUiId';
 import { useRenderElement } from '../../utils/useRenderElement';
@@ -88,8 +90,8 @@ export const ComboboxInput = React.forwardRef(function ComboboxInput(
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
   const listEmpty = filteredItems.length === 0;
 
-  const [composingValue, setComposingValue] = React.useState<string | null>(null);
-  const isComposingRef = React.useRef(false);
+  const [composingValue, setComposingValue] = useState<string | null>(null);
+  const isComposingRef = useRef(false);
 
   const setInputElement = useStableCallback((element: HTMLInputElement | null) => {
     const isInsidePopup = hasPositionerParent || store.state.inline;

packages/react/src/combobox/item-indicator/ComboboxItemIndicator.tsx

@@ -1,5 +1,6 @@
 'use client';
 import * as React from 'react';
+import { useRef } from '@base-ui-components/utils/useRef';
 import type { BaseUIComponentProps } from '../../utils/types';
 import { useComboboxItemContext } from '../item/ComboboxItemContext';
 import { type TransitionStatus, useTransitionStatus } from '../../utils/useTransitionStatus';
@@ -40,7 +41,7 @@ const Inner = React.memo(
 
       const { selected } = useComboboxItemContext();
 
-      const indicatorRef = React.useRef<HTMLSpanElement | null>(null);
+      const indicatorRef = useRef<HTMLSpanElement | null>(null);
 
       const { transitionStatus, setMounted } = useTransitionStatus(selected);