`useRender` can crash during React reconciliation

[aaronadamsCA]

Bug report

Current behavior

If component CountButton contains a React hook, then React will crash when isCounter changes:

{isCounter ? (
  <Button render={CountButton} />
) : (
  <Button>No counter</Button>
)}

You can work around this by rendering the element before passing it in:

{isCounter ? (
  <Button render={<CountButton />} />
) : (
  <Button>No counter</Button>
)}

Expected behavior

Neither example should crash React.

Reproducible example

https://stackblitz.com/edit/vitejs-vite-ykx9a7mz?file=src%2FApp.jsx

Base UI version

v1.1.0

Additional context

This is a pretty big footgun. It's apparently due to React optimistically merging the state of the same component at the same position in the tree.

These are the two errors we've seen in this scenario:

Minified React error #300

Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

Minified React error #310

Rendered more hooks than during the previous render.

[linear]

BAS-375

[atomiks]

render's function indeed doesn't support a component as a function (render={Component}), only these patterns are correct:

• render={<Component />}
• render={(props) => <Component {...props} />}

It can't contain hooks, etc.

[aaronadamsCA]

Makes sense, thank you! I wonder if there's a way to guard against it.

Unfortunately TypeScript sees no difference between these two examples:

render={(props) => <Component {...props} />}

render={(props) => {
  useSomeHook();
  return <Component {...props} />}
}

Most of the time the second example would work just fine, so you'd have no idea you did anything wrong—until it started to crash in some specific scenario much later, which is what happened to us.

I'll see if I can find a short-term solution for our codebase, e.g. a no-restricted-syntax rule in ESLint, to make sure we don't make this mistake again.

[mj12albert]

render={(props) => {
  useSomeHook();
  return <Component {...props} />}
}

I think this is against the rules of hooks?

[aaronadamsCA]

Not if you break it out into its own component. AFAIK the reproduction link follows the rules of hooks, it just doesn't follow the rules of Base UI.

[atomiks]

It might be possible to warn in dev mode if renderFn.name starts with an uppercase letter, though I feel like there will be potential bugs with dev-mode minification for some users' setups. Though maybe things like Fast Refresh already rely on this kind of detection