[render prop] False positive warning for useCallback render functions inside PascalCase components

[auduongtuan]

Bug report

Current behavior

When passing a valid render callback to Base UI components, Base UI logs an invalid-render-prop warning if the callback function is declared inside a PascalCase component and wrapped with useCallback.

Example warning:
Base UI: The renderprop received a function namedDropdownMenu.useCallback[renderSearchInput] that starts with an uppercase letter...

In this case, the callback itself is intentionally lower-case and is not used as render={Component}. The warning appears to be triggered by inferred function names that include the parent component name (DropdownMenu, CommandPalette, etc.).

Expected behavior

No warning for valid render callbacks that are not React components, even when function name inference includes an uppercase parent component prefix (e.g. DropdownMenu.useCallback[...]).

Reproducible example

Minimal shape:

function DropdownMenuExample() {
  const renderSearchInput = useCallback((props) => <input {...props} />, []);

  return <Combobox.Input render={renderSearchInput} />;
}

In development mode, warning can still be raised because the inferred function name resembles DropdownMenuExample.useCallback[renderSearchInput].

We also reproduce similarly with Menu.Trigger / Combobox.Trigger callbacks in React 19 + Next.js dev builds.

Base UI version

@base-ui/react 1.3.0

Which browser are you using?

Chrome 134

Which OS are you using?

macOS 15

Which assistive tech are you using (if applicable)?

N/A

Additional context

I understand the intent of this warning (avoid passing React components directly as plain render functions), but this seems like a false positive from name-based heuristics.

Potential improvement ideas:

• only warn for names that clearly match component identifiers (e.g. ^[A-Z][A-Za-z0-9]*$)
• ignore inferred names containing wrappers like .useCallback[...]
• or treat lower-case inner callback identifiers as safe even if parent scope is PascalCase

Thanks for considering this — it causes noisy warnings even when using valid callbacks.

[linear]

BAS-466

[atomiks]

I figured there’d be a false positive from this somewhere (mentioned in the PR description), but I didn’t encounter it anywhere in our codebase as we never use useCallback on render functions. It was unfortunately hard to know exactly when this would print without real usage from users...

It shouldn't be necessary to memo the render function in your example btw, but we definitely need to tighten the checks to avoid printing the warning incorrectly like this

[github-actions]

This fix will be available in the next npm release of Base UI.

In the meantime, you can try it out on our Canary release channel:

npm i https://pkg.pr.new/@base-ui/react@4324