[core] Performance/refactor: useRender
#1934
Conversation
romgrk
added
core
commit: |
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| const { render, props, state, refs } = params; | ||
| const { ref: intrinsicRefProp, ...intrinsicProps } = props || {}; | ||
| const renderParams = params as useRender.Parameters<State, RenderedElementType> & { | ||
| disableStyleHooks: boolean; | ||
| }; | ||
| renderParams.disableStyleHooks = true; | ||
|
|
||
| const renderElement = useRenderElementLazy( | ||
| undefined, | ||
| { render }, | ||
| { | ||
| props: intrinsicProps, | ||
| state, | ||
| ref: [intrinsicRefProp, ...(refs || [])].filter( | ||
| (x): x is React.Ref<RenderedElementType> => x != null, | ||
| ), | ||
| disableStyleHooks: true, | ||
| }, | ||
| ); | ||
| const element = useRenderElement(undefined, renderParams, renderParams); | ||
|
|
||
| return { | ||
| renderElement, | ||
| }; | ||
| return element; |
There was a problem hiding this comment.
I don't insist on the mutable .disableStyleHooks line, I just wrote it this way to highlight what this refactor made evident: useRender is really just useRenderElement but with style hooks turned off.
The prop/ref destructuring & handling logic was all unnecessary: it's duplicated with the logic in useRenderElement which already does all that.
| * Refs to be merged together to access the rendered DOM element. | ||
| * The ref to apply to the rendered element. | ||
| */ | ||
| refs?: React.Ref<RenderedElementType>[]; | ||
| ref?: React.Ref<RenderedElementType> | React.Ref<RenderedElementType>[]; |
There was a problem hiding this comment.
I standardized this with useRenderElement, both use ref for the propname, while still allowing an array.
docs/src/app/(public)/(content)/react/utils/use-render/page.mdx
Outdated
Show resolved
Hide resolved
I have not seen a case where the lazyness was actually needed, we seem to call |
|
Searching |
|
Ah right, I didn't look at the deprecated There could be more lazyness though. Laziness is set just at the |
This is both perf/refactor. Make
useRendermatch theuseRenderElementAPI.