installHook.js:1 Error: Maximum update depth exceeded - React 19 + Radix

[mmswi]

Bug report

Current Behavior

When using Radix components with React 19, an infinite loop occurs causing the error:

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of
nested updates to prevent infinite loops.
at setRef (composeRefs.tsx:11:5)
at composeRefs.tsx:22:45
at Array.forEach ()
at composeRefs.tsx:22:28
at setRef (composeRefs.tsx:11:5)
at composeRefs.tsx:22:45
...

The setRef function in @radix-ui/react-compose-refs recursively triggers itself, causing React to hit the maximum update depth limit.

In React 19, ref callback behavior changed - ref callbacks can now return cleanup functions, and React may call ref callbacks differently than in React 18. When setRef calls
ref(value) at line 11, it triggers a re-render which invokes setRef again via the composed ref callback at line 22, creating an infinite loop.

Expected behavior

Composed refs should work without causing infinite update loops in React 19.

Reproducible example

I have platejs plugins with radix popovers and radix tooltips on them. If I write fast inside plate, the page breaks.
I'm on a Macbook M1 Pro with 32 GB. One way to trigger this error is to inspect chrome and start a performance recording and start typing real fast. On Safari, for example, it doesn't break. I tried on restarted browser, guest mode. I'm not the only one

CodeSandbox Template

Suggested solution

The composeRefs and useComposedRefs functions need to handle React 19's new ref callback behavior. Possible approaches:

1. Memoize the composed ref callback to prevent unnecessary re-invocations
2. Add a guard to prevent recursive setRef calls
3. Handle the cleanup function return value from React 19 ref callbacks

Additional context

Right now, it works fine with react 18 (even on next.js 16+) and we had to downgrade.

I also saw this reddit post https://www.reddit.com/r/react/comments/1nnvwsp/react_19_causes_maximum_update_depth_exceeded/ where a user raised a similar case

React 19 introduced changes to ref callback behavior, including support for cleanup functions returned from ref callbacks. This may be causing the ref to be re-invoked on each render cycle.

Related stack trace also shows Slate editor involvement:
at Slate.useCallback[onContextChange] (slate.tsx:62:7)
at e.onChange (with-dom.ts:371:7)
at with-react.ts:54:7

This suggests the issue manifests when Radix components are used alongside Slate/Plate editors, where both libraries compose refs.

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-compose-refs	1.1.0
Radix Package(s)	@radix-ui/react-accordion	1.2.12
Radix Package(s)	@radix-ui/react-avatar	1.1.11
Radix Package(s)	@radix-ui/react-checkbox	1.3.3
Radix Package(s)	@radix-ui/react-collapsible	1.1.12
Radix Package(s)	@radix-ui/react-dialog	1.1.15
Radix Package(s)	@radix-ui/react-dropdown-menu	2.1.16
Radix Package(s)	@radix-ui/react-hover-card	1.1.15
Radix Package(s)	@radix-ui/react-icons	1.3.2
Radix Package(s)	@radix-ui/react-popover	1.1.15
Radix Package(s)	@radix-ui/react-progress	1.1.8
Radix Package(s)	@radix-ui/react-select	2.2.6
Radix Package(s)	@radix-ui/react-separator	1.1.8
Radix Package(s)	@radix-ui/react-toolbar	1.1.11
Radix Package(s)	@radix-ui/react-tooltip	1.2.8
React	react, @types/react	19.2.3
Browser	Chrome	Latest
Assistive tech	n/a
Node	node	24.13.0
npm/yarn/pnpm	pnpm	10.26.0
Operating System	macOS	Darwin 24.6.0

• Next.js: 16.1.1
• TypeScript: 5.9.3
• platejs: 52.0.15

[yannisgu]

I've identified the root cause and submitted a fix in #3804.

Root cause

SlotClone (in @radix-ui/react-slot) calls composeRefs(forwardedRef, childrenRef) directly on every render, creating a new function each time. The internal setRef(ref, value) returns ref(value), which in React 19 is treated as a cleanup function. React sees a new callback ref with cleanup on each render → unmounts old ref → mounts new ref → triggers state setters → re-render → infinite loop.

The loop is synchronous (happens during React's commit phase), which is why the browser tab freezes rather than throwing "Maximum update depth exceeded".

Fix

useComposedRefs already exists and wraps composeRefs in React.useCallback — it was just not being used in SlotClone. The fix is a one-line change to use useComposedRefs instead of raw composeRefs.

This is exacerbated by libraries that trigger re-renders during commit (like @tanstack/react-form's useField layout effect with no dependency array — reported separately), but the core issue is the unstable ref identity in SlotClone.

[owittek]

Disclosure: This comment was drafted by a Claude Code agent and reviewed by a human before posting. Please validate the analysis independently.

The Slot fix (PR #3804) is insufficient — the root cause is in useComposedRefs itself

PR #3804 correctly identifies that SlotClone should use useComposedRefs instead of raw composeRefs. However, useComposedRefs itself has the same instability problem when callers pass inline arrow functions as arguments.

Example: react-select triggers the same infinite loop

SelectItemText in @radix-ui/react-select@2.2.6 already uses useComposedRefs, but passes inline arrow functions:

// packages/react/select/src/select.tsx — SelectItemText
const composedRefs = useComposedRefs(
  forwardedRef,
  (node) => setItemTextNode(node),        // new function each render
  itemContext.onItemTextChange,
  (node) => contentContext.itemTextRefCallback?.(node, itemContext.value, itemContext.disabled)  // new function each render
);

The current useComposedRefs implementation:

function useComposedRefs(...refs) {
  return React.useCallback(composeRefs(...refs), refs);
}

Since the inline arrows are new references each render, refs (the deps array) changes → useCallback returns a new composed ref → React 19 detaches old ref (calling cleanup) → attaches new ref → setItemTextNode(node) triggers setState during commit → re-render → infinite loop.

Fix: stabilize useComposedRefs with useRef

The fix is a small change to packages/react/compose-refs/src/compose-refs.tsx:

 function useComposedRefs(...refs) {
-  return React.useCallback(composeRefs(...refs), refs);
+  const refsRef = React.useRef(refs);
+  refsRef.current = refs;
+  return React.useCallback(
+    (node) => composeRefs(...refsRef.current)(node),
+    []
+  );
 }

This returns a stable callback (empty deps) that always reads the latest refs via the mutable ref. The composeRefs closure captures refs at invocation time, so cleanup semantics are preserved.