[internal] Performance: useEffect optimization & fast hooks

[Copilot]

• I have followed (at least) the PR section of the contributing guide.

Description

Replace React useEffect, useLayoutEffect, useInsertionEffect, useRef, useCallback, and useState with custom wrappers that perform faster via the fastHooks.ts module.

Changes

• Updated packages/utils/src/fastHooks.ts: Added createUseRef, createUseCallback, and createUseState functions using the same batching pattern as createUseEffect. Consolidated all didInitialize flags into a single flag on the root Context type. Added support for useInsertionEffect.
• Updated packages/utils/src/useEffect.ts: Uses createUseEffect() from fastHooks
• Added packages/utils/src/useInsertionEffect.ts: Uses createUseEffect('useInsertionEffect') from fastHooks
• Updated packages/utils/src/useRef.ts: Uses createUseRef() from fastHooks
• Updated packages/utils/src/useCallback.ts: Uses createUseCallback() from fastHooks
• Added packages/utils/src/useState.ts: Uses createUseState() from fastHooks
• Updated packages/utils/src/useRefWithInit.ts: Uses React.useRef directly to avoid circular dependency
• Updated packages/utils/src/: Files now use the wrappers instead of direct React hook calls
• Updated packages/react/src/: All files migrated to use useEffect, useRef, useCallback, and useState from utils

Implementation Details

The useRef, useCallback, useState, and useInsertionEffect implementations follow the same batching pattern as useEffect:

• When inside a createComponent context, refs, callbacks, state, and effects are stored in a context array
• On first render, values are pushed to the array
• On subsequent renders, values are retrieved from the array by index
• For useCallback, dependencies are compared using areDepsEqual to determine if the callback should be updated
• For useState, initial value is computed (supporting both value and function initializers) and stored with its setter
• All hooks share a single didInitialize flag on the root context for simplified state management

Usage

import { useEffect } from '@base-ui-components/utils/useEffect';
import { useInsertionEffect } from '@base-ui-components/utils/useInsertionEffect';
import { useRef } from '@base-ui-components/utils/useRef';
import { useCallback } from '@base-ui-components/utils/useCallback';
import { useState } from '@base-ui-components/utils/useState';

const ref = useRef<HTMLElement>(null);
const callback = useCallback(() => { /* logic */ }, [deps]);
const [value, setValue] = useState(initialValue);
useEffect(() => {
  // effect logic
}, [deps]);
useInsertionEffect(() => {
  // insertion effect logic
}, [deps]);

Follows the same pattern as useIsoLayoutEffect and other existing hook wrappers.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	6e51e48
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/692e27381cf43d00089c8de0
😎 Deploy Preview	https://deploy-preview-3367--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[mui-bot]

Bundle size report

Bundle	Parsed size	Gzip size
@base-ui-components/react	🔺+275B(+0.07%)	🔺+309B(+0.24%)

Details of bundle changes

---

Check out the code infra dashboard for more information about this PR.

[pkg-pr-new]

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui-components/react@3367
  

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui-components/utils@3367
  

commit: d598ac2

[romgrk]

@copilot Do the same change as in the original prompt, but for useRef and useCallback.

[Copilot]

@copilot Do the same change as in the original prompt, but for useRef and useCallback.

Done in add770e. Created useRef and useCallback wrapper functions in the utils package and replaced all usages across both packages/utils/src/ and packages/react/src/.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• iojs.org
  • Triggering command: /usr/bin/curl curl -q --fail --compressed -L -s REDACTED -o - (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[romgrk]

@copilot Now implement useRef and useCallback via the fastHooks.ts module, using the same idea as useEffect does.

[Copilot]

@copilot Now implement useRef and useCallback via the fastHooks.ts module, using the same idea as useEffect does.

Implemented in d902e55. Added createUseRef and createUseCallback in fastHooks.ts using the same batching pattern as createUseEffect. Updated useRef.ts and useCallback.ts to use these new factory functions.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• iojs.org
  • Triggering command: /usr/bin/curl curl -q --fail --compressed -L -s REDACTED -o - (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[romgrk]

@copilot Now continue this PR by doing the same changes, but for the React.useState hook.

[Copilot]

@copilot Now continue this PR by doing the same changes, but for the React.useState hook.

Implemented in dbedbb9. Added createUseState in fastHooks.ts using the same batching pattern as the other hooks, created useState.ts wrapper, and replaced all React.useState usages across both packages/utils/src/ and packages/react/src/.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• iojs.org
  • Triggering command: /usr/bin/curl curl -q --fail --compressed -L -s REDACTED -o - (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[romgrk]

@copilot Extract all the didInitialize flags in the fastHooks.ts module into a single flag, on the root context.

[Copilot]

@copilot Extract all the didInitialize flags in the fastHooks.ts module into a single flag, on the root context.

Done in b5fbe0e. Moved didInitialize from each individual context (useEffect, useLayoutEffect, useRef, useCallback, useState) to a single flag on the root Context type.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• iojs.org
  • Triggering command: /usr/bin/curl curl -q --fail --compressed -L -s REDACTED -o - (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[romgrk]

@copilot Now do the same thing for useInsertionEffect.

[Copilot]

@copilot Now do the same thing for useInsertionEffect.

Done in 6e51e48. Added useInsertionEffect support to fastHooks.ts and created useInsertionEffect.ts wrapper following the same pattern as the other effect hooks.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• iojs.org
  • Triggering command: /usr/bin/curl curl -q --fail --compressed -L -s REDACTED -o - (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)