Exploring Slots and Component Patterns in UI Design

Sam and Ryan talk about render props in React. They discuss where they came from, how Hooks superseded them for sharing stateful logic, how data attributes compare to them for customizing styling, and how for certain complex components like forms they're still a great solution for accessing slices of internal state.

Timestamps:

• 0:00 - Intro
• 3:40 - Where did render props come from?
• 6:01 - How hooks replaced many use cases for render props
• 8:14 - Using render props for custom styling
• 10:32 - Data attributes vs. render props for custom styling
• 16:43 - Using render props to peek into an uncontrolled component's internal state
• 21:05 - Forms example and using render props for a smaller public API
• 24:10 - React docs mention of render props
• 25:48 - Where render props shine

Links:

• Headless UI Menu
• Radix Forms
• React Aria Forms
• React docs - Render props
• Our upcoming course on React Component Patterns
• Email Sam
• Email Ryan