[data grid][charts] Consider using `useRenderElement` from Base UI

[bernardobelchior]

Investigate if it's worth introducing useRenderElement from Base UI or if useComponentRenderer from MUI X internals is sufficient.

FYI the Base UI team changed how they create the element to render (you can look at their useRenderElement hook).
I'm not sure how much the useComponentRenderer from the grid was copy pasted from the Base UI team, but if the idea is to mimic the behavior then it would probably worth aligning at some point 👍

Originally posted by @flaviendelangle in #18203.

[bernardobelchior]

My understanding from this conversation is that it was mostly an API difference and performance shouldn't be too different. CCing @romgrk as he conducted the performance investigation in case I understood it incorrectly.

[flaviendelangle]

For me both hooks have the same perf as long as they share the internals.
But your version doesn't use the Base UI internals behind the scene, so it shouldn't benefit from the optimization Romain did, unless he also applied them on the X version of the hook of course.

A had a 2nd look at the two hooks and it seems that the X version differs quite a lot. It merges sx (which Base UI doesn't have) but doesn't merge the event handlers or the ref.

[KenanYusuf]

It merges sx

We can actually remove this given the base slot components no longer accept the sx prop (at least for grid).

doesn't merge the event handlers or the ref

This would be nice to have for the X components too. Another reason to adopt the Base UI hook.

[bernardobelchior]

We can actually remove this given the base slot components no longer accept the sx prop (at least for grid).

For charts this is new, so we can remove it as well. I'll do that 👍

This would be nice to have for the X components too. Another reason to adopt the Base UI hook.

Nice, then I guess it makes sense to adopt it. I'll take care of that when I have the time

[bernardobelchior]

So, I did some investigating. The Base UI useRenderElement is much more complex than our current useComponentRenderer, mostly because they add very useful features such as ref forking and class name, style, props and event handlers merging. However, useRenderElement seems to assume that its first argument will be tag name (e.g., 'div'), which isn't true for our use case. I'll see if this is something that we can fix.

[romgrk]

My advice would be to not copy base-ui's implementation here.