Render functions provide an alternative way to define children. Instead of passing elements directly, you pass a function that returns them. This pattern gives access to the component's internal context, allowing you to use its data or state when rendering children. For components with slots, it's always the root component that exposes this context through a render function.

This approach makes components more flexible and expressive. It allows dynamic rendering based on runtime conditions, simplifies state sharing between parent and child and removes the need for extra wrapper components or prop drilling. It also keeps markup cleaner, since the logic for how and when elements appear lives alongside the data that drives them.

Example