Documentation on composeRenderProps()

[gataria]

I'd like to open up by saying that I'm just coming into this library for the first time, and that I'm still finding my footing in developing React applications, but I'm ecstatic at the idea of helping create a more accessible web using react-aria(-components) :)

I did want to bring up something I noticed as I've dug into the examples for this library -- this composeRenderProps() function that seems to be pervasive throughout the entire codebase (e.g., in Tabs.tsx, Button.tsx, etc.) I've seen and understand the examples of using it for things like applying tailwind-variants styles, though I've had trouble understanding some of its other instances in the codebase, and I was still a little bit lost on why this pattern is used and in so many places at that. I have to believe there is good reason for using it, but I've just had trouble understanding it as someone just coming into this library and its design patterns.

I did find a PR #5596 from 2023 where the function was first merged into the repo by @devongovett, which mentions that this helper function "will help combine render props passed in from outside a component with built-in ones", and that they'd "need to find a place to document this." As far as I can tell, its documentation has been limited to the JSDoc comment above the function's definition -- it's only referenced in issue #5767 and in no other discussions, as far as I can tell. Would it be possible to add more details on why this pattern is used in the RA documentation (and how/where developers using RA can take advantage of it)?

I'm hoping that this discussion at least shows up on Google for anyone that was wondering the same thing I was.

[gataria]

Ah, seems like GitHub didn't embed the function's code like I expected. Here's the permalink to the code I'm talking about:
https://github.com/adobe/react-spectrum/blob/b842443cf50270cb610f8718c8dea310831997f4/packages/react-aria-components/src/utils.tsx#L146C1-L156C2

[snowystinger]

Ah, yeah, we should definitely have that documented a bit more. It makes it possible for someone who wants to keep the same children API that we have for RAC. If you don't do that, then you can't support renderProps to consumers of your component.

<MyButton>{children}</MyButton>
<MyButton>{(renderProps) => children(renderProps)}</MyButton>

This really only matters if you're adding other children inside your component that also use renderProps

function MyButton() {
  return (
    <Button>{(renderProps) => {<><ButtonDecoration {...renderProps}  />{props.children??}</>}</Button>
  )
}

You could combine them yourself, but this makes it easier.